CSS是网页美化中必不可少的一项技术,其中给按钮加背景是常见的需求。方法有多种,下面介绍几种主流的方法。方法一:使用background属性button{ background-color: #007
CSS是网页美化中必不可少的一项技术,其中给按钮加背景是常见的需求。方法有多种,下面介绍几种主流的方法。
方法一:使用background属性
button{ background-color: #007bff; color: #fff; padding: 10px 20px; font-size: 16px; }
上面的代码中,我们先为按钮设置了蓝色的背景颜色,然后为字体颜色设置了白色,设置了padding和font-size。
方法二:使用图片作为背景
button{ background-image: url("button-bg.jpg"); background-repeat: no-repeat; background-size: cover; color: #fff; padding: 10px 20px; font-size: 16px; }
上面代码中,我们使用一张名为button-bg.jpg的图片作为背景,设置了图片不重复,填满整个按钮,并为字体颜色、padding和font-size做了相应的设置。
方法三:使用伪类实现渐变背景
button{ position:relative; overflow:hidden; color:#fff; } button::before{ content:""; width:100%; height:100%; position:absolute; top:0; left:0; background:linear-gradient(to right,#f29b8f,#efd9ce); opacity:0.8; z-index:-1 }
上面代码中,我们使用了伪类 before来实现渐变的背景,使用了CSS3中的线性渐变,设置为从左到右,渐变颜色为粉色到浅黄色,使用 opacity 属性来控制透明度,最后再使用z-index将伪类置于底层。
粉丝
0
关注
0
收藏
0