[分享]css中怎么给按钮加背景

CSS是网页美化中必不可少的一项技术，其中给按钮加背景是常见的需求。方法有多种，下面介绍几种主流的方法。方法一：使用background属性button{ backgroundcolor: 007bf...

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将伪类置于底层。