图像/按钮上的文字

Question

如何使用html/css在图像/按钮上创建文本.

例如:我有一个按钮(登录按钮).我希望将文本"Login"放在该按钮上.文本应该是图像/按钮的中心.

Answer 1

您可以简单地设置background-image相关属性button(或者如果您使用其他元素代替a button).

请注意,您可以使用控制文本的高度/垂直居中line-height,但是,如果文本是多行的,则可能存在其他问题,因此您可能希望使用padding或使用子元素top:50%;tranform:translateY(-50%);

如果使用语义上有效的button元素,则默认情况下文本居中对齐,否则只需设置text-align:center

button {
  line-height: 50px;
  width: 300px;
}
button.imgButton {
  color: white;
  background-image: url(http://abdpbt.com/tech/wp-content/uploads/2009/09/gradient.jpg);
  background-size:cover; /* <-- scale the image to cover the button */
  background-position:center center; /* <-- center the image in the button */
}

<button>Normal Button</button>

<button class='imgButton'>Image Button</button>