CSS中给按钮添加图片是非常简单的,只需要使用background-image属性即可。.button { background-image: url( image.jpg ); } 上面的代码表示给
CSS中给按钮添加图片是非常简单的,只需要使用background-image属性即可。
.button { background-image: url("image.jpg"); }
上面的代码表示给类名为button的元素添加一张名为image.jpg的图片作为背景图像。
当然,我们还可以添加一些其他的样式,例如调整背景图片的位置、大小、重复等等。
.button { background-image: url("image.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; }
上面的代码将图片放置于按钮的中心位置,并将其大小设置为完全覆盖按钮,同时禁止图片重复出现。
最后,值得注意的是,我们可以将多个样式属性写在一起,使用逗号隔开。这样就可以为按钮添加多张图片,这些图片可以按照顺序在按钮上覆盖以创建特殊的效果。
.button { background-image: url("image1.jpg"), url("image2.jpg"); background-position: center, left; background-size: cover, auto; background-repeat: no-repeat; }
上面的代码将两张图片分别放置在按钮的中心和左边,同时分别指定了它们的大小。
粉丝
0
关注
0
收藏
0