在CSS中怎麼為按鈕添加背景圖片（詳解及實例）-css教學-PHP中文網

在CSS中怎麼為按鈕添加背景圖片（詳解及實例）

奋力向前

發布： 2021-07-12 17:53:53

轉載

4268 人瀏覽過

這裡文章可以按鈕加入好看的圖片，讓你可以輕易地讓頁面的風格千變萬化。可以用漸層背景；button的background就可以幫按鈕換顏色；可以利用overflow: hidden然後去掉遮罩的。

在CSS中怎麼為按鈕添加背景圖片（詳解及實例）

這裡用top、left、right、bottom來調整高度和寬度來遮住按鈕，加上上面說的漸層和透明。我們將遮罩分為上下兩個部分，上面的用漸變背景，下面的只要用純色就可以了（其實用一個遮罩也可以實現，但是沒有辦法讓遮罩的邊框也漸變，所以用兩個）。程式碼是這樣的： 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;
}

登入後複製

其實我也不是完全明白CSS3的gradient怎麼用，怕講錯，所以這裡就不解釋了。做這個的時候，我是按照官方文件上的例子改的。

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

#OK，遮罩層已經做好了，接下來做按鈕。按鈕這個圖層要提供遮罩定位，而且要設定按鈕的大小、顏色，為了美觀，我們給它加上圓角和陰影，這也是CSS3的內容。下面是程式碼： 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要設定成和遮罩層的一樣，我試著給按鈕加上overflow: hidden然後去掉遮罩的border-radius，儘管這樣，遮罩的四個角落還是會顯示出來，為什麼會這樣還請高手指點。接下來，就是按鈕的文字部分了，這個層要處在遮罩層的上方以便清楚的顯示出文字。和遮罩層一樣，設定絕對定位，高寬都設為100%，由於我們的文字層在文檔流裡處在遮罩層的後面，所以就不用再設z-index了。程式碼如下： CSS程式碼如下：

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

登入後複製

到這裡，我們的按鈕就完成了。這個按鈕的優點是不用圖片，減少了HTTP連線數，當然也減少了流量。缺點是，這個按鈕現在還沒什麼用，因為IE到目前為止不支援CSS3，雖然有濾鏡，但不如用圖片來得快。在這裡祝福IE被早日淘汰。

推薦學習：CSS影片教學

以上是在CSS中怎麼為按鈕添加背景圖片（詳解及實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！