CSS3的一個新特性是背景rgba。在CSS2.1中,background-color屬性只能設置一個純色。而在CSS3中,背景rgba可以讓我們設置背景顏色的透明程度。
div { background-color: rgba(255, 0, 0, 0.5); }
上述代碼片段中,div元素的背景色設置為紅色(rgb(255, 0, 0))并且透明度為0.5(0 ~ 1之間)。意味著紅色會占據背景色的50%,而其余50%會讓下層的內容顯示出來。
我們可以把這個rgba的顏色值作為背景色,放在背景圖片的下面,這樣我們就可以在圖片上添加文字,并通過文字透過圖片來傳達信息。
div { background-image: url("image.jpg"); background-color: rgba(0, 0, 0, 0.5); }
代碼中,div元素通過background-image屬性將一張圖片設置為背景圖片,而background-color屬性則設置了一個半透明的黑色背景,使得文字能更清晰地顯示在圖片上。
總的來說,背景rgba屬性為我們提供了更多實用的可能性,為我們的網頁設計帶來了更加優秀的效果。