這裡文章可以按鈕加入好看的圖片,讓你可以輕易地讓頁面的風格千變萬化。可以用漸層背景;button的background就可以幫按鈕換顏色;可以利用overflow: hidden然後去掉遮罩的。
這裡用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中文網其他相關文章!