關于CSS背景透明只能做黑色的問題,是有一定的道理存在的。
opacity: 0.5; background-color: #000000;
以上代碼可以讓一個元素的背景透明度為50%,但是背景顏色卻只能為黑色。
這是因為CSS的opacity屬性是指元素本身的透明度,包括元素內部的所有內容,而不僅僅是背景。
<div style="opacity: 0.5;"> <p>這里的文字也會變得半透明。</p> </div>
如上代碼所示,元素內部的所有內容都會變得半透明,而只有background-color屬性指定的背景顏色會受到影響。
因此,如果想要實現背景透明的效果,需要使用rgba顏色模式,其中a代表alpha通道,可以指定顏色的透明度。
background-color: rgba(0, 0, 0, 0.5);
如上代碼所示,可以設置背景顏色為黑色,并且透明度為50%。
需要注意的是,IE8及以下版本不支持rgba(alpha通道),需要用IE特有的filter:alpha來實現相似的效果。
filter:alpha(opacity=50); background-color: #000000;
以上代碼可以讓元素的背景透明度為50%,背景顏色為黑色,但是IE瀏覽器下的體驗可能不如其他瀏覽器。