CSS中可以通過設置background-color屬性的透明度實現背景透明效果。
/* 設置透明度為50% */ background-color: rgba(255, 255, 255, 0.5);
其中rgba表示顏色的4個屬性值:紅色、綠色、藍色和透明度。透明度用0到1之間的數字表示,0為完全透明,1為完全不透明。
/* 設置透明度為100%,即完全透明 */ background-color: rgba(255, 255, 255, 0);
如果想讓某個元素的背景完全透明,可以使用transparent:
/* 完全透明 */ background-color: transparent;
可以將背景設置為透明后,再設置元素的邊框、陰影等效果,可以達到很炫的效果。
/* 設置邊框為白色,寬度為2px */ border: 2px solid #fff;
需要注意的是,設置背景透明后,如果該元素里面的內容有背景色,會被透明的背景覆蓋,導致內容看不清,可以通過增加內邊距或者使用z-index屬性解決。
/* 增加內邊距 */ padding: 10px; /* 使用z-index */ z-index: 1;
最后,需要注意的是,設置背景為透明會增加瀏覽器的渲染次數,降低網頁的性能,因此要根據具體需要謹慎使用。
下一篇id包含css