CSS中設(shè)置背景透明度可以通過opacity屬性實現(xiàn),該屬性控制元素本身以及子元素的透明度,但該屬性設(shè)置的透明度會影響到整個元素的內(nèi)容,包括文本和背景。如果只需要背景透明,可以使用background-color屬性和rgba顏色值。
/* opacity設(shè)置透明度 */ .transparent { opacity: 0.5; } /* background-color和rgba設(shè)置背景色透明度 */ .transparent-background { background-color: rgba(255, 255, 255, 0.5); /* 白色背景,透明度為50% */ }
然而,使用opacity屬性存在一定的兼容性問題。在IE8及以下版本中無法識別該屬性,解決方法是使用filter屬性,如下所示:
/* 兼容IE8及以下版本的透明度設(shè)置 */ .transparent { filter: alpha(opacity=50); /* 透明度50% */ opacity: 0.5; }
除了使用filter屬性,還可以使用IE hack來實現(xiàn),在CSS中使用以下代碼,可以讓IE8及以下版本識別特定的CSS屬性:
/* 兼容IE8及以下版本的opacity設(shè)置 */ .transparent { background-color: #000000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */ filter: alpha(opacity=50); /* IE7及以下 */ opacity: 0.5; }
總的來說,為了實現(xiàn)兼容性,建議使用background-color和rgba來設(shè)置背景透明度。如果需要支持IE8及以下版本,則需要使用filter屬性或者IE hack。在實際開發(fā)中,可以使用CSS預(yù)處理器如LESS或者Sass來簡化兼容性代碼的書寫。
下一篇頁面同比例縮放css