[分享]css3按钮图片居中显示图片

CSS3 按钮是 web 开发中很常用的一种元素。它可以为网站或应用程序增添各种视觉效果，同时也有利于提高用户体验。在制作 CSS3 按钮时，经常会遇到需要将图片居中显示的场景。下面我们来介绍如何使用...

CSS3 按钮是 web 开发中很常用的一种元素。它可以为网站或应用程序增添各种视觉效果，同时也有利于提高用户体验。在制作 CSS3 按钮时，经常会遇到需要将图片居中显示的场景。下面我们来介绍如何使用 CSS3 实现这个功能。

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("button.png");
  background-size: cover;
  width: 200px;
  height: 50px;
} 

首先，我们需要将按钮元素的宽度和高度设置为指定值。然后，将其显示属性设置为 flex，并将垂直和水平对齐方式都设置为居中。接下来，我们需要给按钮设置背景图片，并将其大小设置为 cover。这样就可以让图片完整地覆盖按钮元素。

最后，只需要将按钮元素的 HTML 代码插入到需要显示的位置即可。如下所示：

<div class="btn"></div> 

通过这个简单的 CSS3 代码，我们就可以实现图片居中显示的效果。在实际应用中，还可以通过其他 CSS3 属性进一步优化按钮效果，比如设置鼠标悬停时的交互效果等。希望这篇文章能够对你有所帮助。