button标签设置背景图片
时间: 2023-09-09 11:12:44 浏览: 161
动态生成按钮设置背景图片
5星 · 资源好评率100%
可以使用CSS中的background属性来设置button标签的背景图片。具体的代码如下:
```
button {
background: url("your_image_url.jpg") no-repeat center center;
background-size: cover;
}
```
其中,url()函数用于指定图片的路径,no-repeat表示不重复显示图片,center center表示将图片水平和垂直居中显示,background-size属性用于设置背景图片的大小。如果设置为cover,背景图片会被拉伸或缩放,以铺满整个button标签。
如果需要对不同状态的button标签设置不同的背景图片,可以使用CSS中的伪类,如:hover、:active等来指定不同状态下的样式。例如:
```
button:hover {
background: url("your_hover_image_url.jpg") no-repeat center center;
background-size: cover;
}
```
这样设置后,当鼠标悬停在button标签上时,将显示指定的背景图片。
阅读全文