本篇內(nèi)容介紹了“在CSS中怎么給按鈕添加背景圖片”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站專注于廣漢網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供廣漢營(yíng)銷型網(wǎng)站建設(shè)，廣漢網(wǎng)站制作、廣漢網(wǎng)頁(yè)設(shè)計(jì)、廣漢網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造廣漢網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供廣漢網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

這里文章可以按鈕添加好看的圖片，讓你可以輕而易舉地讓頁(yè)面的風(fēng)格千變?nèi)f化。可以用漸變背景；button的background就可以給按鈕換顏色；可以利用overflow: hidden然后去掉遮罩的。

這里用top、left、right、bottom來(lái)調(diào)整高度和寬度來(lái)遮住按鈕，加上上面說(shuō)的漸變和透明。我們將遮罩分為上下兩個(gè)部分，上面的用漸變背景，下面的只要用純色就可以了（其實(shí)用一個(gè)遮罩也可以實(shí)現(xiàn)，但是沒(méi)有辦法讓遮罩的邊框也漸變，所以用兩個(gè)）。代碼是這樣的： CSS代碼如下：

.mask-t, .mask-b {
  position: absolute;    
  -moz-box-sizing: border-box;
  -wekit-box-sizing: border-box;
  box-sizing: border-box;    
}
.mask-t {
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 50%;
   
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;  
   
  background: -moz-linear-gradient(270deg, 
    rgba(117, 117, 117, .4) 10%, 
    rgba(94, 94, 94, .4) 30%
  );
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(rgba(117, 117, 117, .4)), to(rgba(94, 94, 94, .4))
  );
     
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
}
.mask-b {
  top: 50%;
  left: 1px;
  right: 1px;
  bottom: 0;
   
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px 0 0;  
   
  background: rgba(0, 0, 0, .3);
     
  border: 1px solid rgba(255, 255, 255, .3);
  border-top: none;
}

其實(shí)我也不是完全明白CSS3的gradient怎么用，怕講錯(cuò)，所以這里就不解釋了。做這個(gè)的時(shí)候，我是按照官方文檔上的例子改的。

Gecko的：https://developer.mozilla.org/index.php?title=en/CSS/-moz-linear-gradient
WebKit的：http://webkit.org/blog/175/introducing-css-gradients/

OK，遮罩層已經(jīng)做好了，接下來(lái)做按鈕。按鈕這個(gè)層要給遮罩提供定位，而且要設(shè)置按鈕的大小、顏色，為了美觀，我們給它加上圓角和陰影，這也是CSS3的內(nèi)容。下面是代碼： CSS代碼如下：

.button {
  position: relative;
  background: red;
  width: 160px;
  height: 40px;
  line-height: 40px;
   
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
   
  -moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
  box-shadow:0 1px 3px rgba(0, 0, 0, .5);
}

改變.button的background就可以給按鈕換顏色了。注意按鈕的border-radius要設(shè)置成和遮罩層的一樣，我試圖給按鈕加上overflow: hidden然后去掉遮罩的border-radius，盡管這樣，遮罩的四個(gè)角還是會(huì)顯示出來(lái)，為什么會(huì)這樣還請(qǐng)高手指點(diǎn)。接下來(lái)，就是按鈕的文字部分了，這個(gè)層要處在遮罩層的上方以便清楚的顯示出文字。和遮罩層一樣，設(shè)置絕對(duì)定位，高寬都設(shè)為100%，由于我們的文字層在文檔流里處在遮罩層的后面，所以就不用再設(shè)z-index了。代碼如下： CSS代碼如下：

.text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  color: #FFF;
  text-decoration: none;
}

到這里，我們的按鈕就做好了。這個(gè)按鈕的優(yōu)點(diǎn)是不用圖片，減少了HTTP連接數(shù)，當(dāng)然也減少了流量。缺點(diǎn)是，這個(gè)按鈕現(xiàn)在還沒(méi)什么用，因?yàn)镮E到目前為止不支持CSS3，雖然有濾鏡，但不如用圖片來(lái)得快。在這里祝愿IE被早日淘汰。

“在CSS中怎么給按鈕添加背景圖片”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！