大多數網頁都會使用 CSS 來設置頁面元素的背景,不過有時候您可能想要將某個頁面元素的背景刪除掉。在這篇文章中,我們將介紹如何刪除 CSS 背景。
.header{ background-color: blue; background-image: url('image.jpg'); background-repeat: no-repeat; background-size: cover; }
上面的 CSS 代碼設置了一個頭部元素的背景顏色為藍色,圖片為 image.jpg,并且圖片不會重復出現,同時也鋪滿了整個頭部元素。接下來我們將使用以下步驟來刪除這個元素的背景。
第 1 步: 讓背景顏色透明
.header { background-color: transparent; }
將背景顏色設置為 transparent 將會使您的背景顏色變成透明的。如果您的元素原本的背景顏色帶有不透明效果,那么在使用這個方法時會產生出現一種淺淡的顏色層。比如修改為:background-color: rgba(255, 255, 255, 0.1);
第 2 步: 去掉背景圖片
.header { background-image: none; }
將 background-image 設置為 none 將會使得沒有任何圖片出現在您的元素的背景中。
第 3 步: 去掉背景重復
.header { background-repeat: no-repeat; background-size: initial; }
現在您可以將元素中的圖片值移除,但是在有些情況下,水平和垂直方向上可能還會產生重復現象。通過將 background-repeat 設置為 no-repeat,能夠確保您的背景圖片只出現一次,而沒有任何重復。您還可以將 background-size 設置為 initial,來確保圖片大小不會鋪滿整個元素。
通過上面的步驟,您現在可以看到沒有背景的元素了。
上一篇怎么寫多樣式css
下一篇怎么使用css選擇器