CSS中的background屬性可以讓我們設置背景圖片,而利用CSS的一些技巧可以讓背景圖片變暗,以達到更好的視覺效果。
/* 使用rgba值讓背景顏色帶有透明度 */ background: rgba(0, 0, 0, 0.5) url("example.jpg") no-repeat center center fixed; /* 使用linear-gradient漸變背景 */ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("example.jpg") no-repeat center center fixed;
以上兩種方法都利用了CSS中的background屬性來設置背景圖片,并通過添加不同的參數來達到變暗的效果。
第一種方法利用rgba值來設置背景顏色,其中最后一個參數0.5表示透明度,值越小表示越透明。這樣設置后,背景圖片就會被一層半透明黑色遮蓋,從而使整個背景變暗。
第二種方法則是利用CSS的線性漸變來實現,將兩個相同的rgba值作為參數傳入,最后面的參數0.6表示透明度。這樣設置后,也會在背景圖片上疊加一層半透明黑色,達到變暗的效果。