[分享]css中如何把图片做成按钮

在前端开发中，我们经常需要将图片做成按钮以提高网站的用户体验。这个过程可以通过CSS来实现。.btn { display: inlineblock; /将图片转化为行内元素/ background: ...

在前端开发中，我们经常需要将图片做成按钮以提高网站的用户体验。这个过程可以通过CSS来实现。

.btn {
  display: inline-block; /*将图片转化为行内元素*/
  background: url("button.png") no-repeat center center; /*引入图片*/
  width: 100px; /*设置图片按钮的宽度*/
  height: 50px; /*设置图片按钮的高度*/
  text-align: center; /*将图片居中*/
  line-height: 50px; /*将图片按钮的行高设置为图片本身的高度*/
  color: #FFF; /*设置文字颜色*/
} 

通过以上的CSS代码，我们将图片按钮的样式设置为行内元素，并且通过background属性引入了我们的图片资源。接下来，我们需要设置图片的宽度和高度，并且通过text-align和line-height属性将图片居中显示。此时，图片按钮已经可用，但是还缺少一个按钮需要的文字。

.btn {
  display: inline-block; /*将图片转化为行内元素*/
  background: url("button.png") no-repeat center center; /*引入图片*/
  width: 100px; /*设置图片按钮的宽度*/
  height: 50px; /*设置图片按钮的高度*/
  text-align: center; /*将图片居中*/
  line-height: 50px; /*将图片按钮的行高设置为图片本身的高度*/
  color: #FFF; /*设置文字颜色*/
}

.btn span {
  display: inline-block; /*将文字设置为行内元素*/
  vertical-align: middle; /*将文字垂直居中*/
} 

在以上CSS代码中，我们新加了一个span元素并且设置了它为行内元素，并且通过vertical-align属性将文字设置为垂直居中。将上述代码添加到HTML文件中，即可实现美观的图片按钮。