css容器背景透明,內部文字內容不透明

2021-09-24 10:08:43 字數 645 閱讀 2626

設定透明背景文字不透明,可採用的屬性有rgba和ie的專屬濾鏡filter:alpha,其相容性如下圖所示:

針對ie6、7、8瀏覽器,我們可以採用fiter:alpha,針對標準瀏覽器我們採用rgba,那麼問題來了,ie9瀏覽器2個屬性都支援,一起使用會重複降低不透明度...

那麼,如何只對ie6、7、8使用fiter:alpha如何實現呢?方法如下:

/* 只支援ie6、7、8 */

@media \0screen\,screen\9

ok,所有問題都解決了,全部**如下:

背景透明,文字不透明

可能很多同學會覺得很複雜,為什麼不直接用兩個div放在同乙個位置就行了,乙個不透明div,乙個文字div,很簡單的解決問題,這也是好個方法,但是需要寫絕對定位或負margin,並出現空內容的div,而且這是這種方法在有些場景下也會顯得複雜,如下示例,滑鼠經過商標後展現展現透明的提示文案,就需要控制2個div啦~

css背景透明

css實現背景透明而文字不透明 平時我們所說的調整透明度,其實就是在樣式中調整不透明度,而實現透明的css方法通常有如下3中方式 css3的opacity x。x的取值為0到1,如opacity 0.5表示不透明度為50 css3的rgba red,green,blue,alpha alpha的取值...

css實現背景透明文字不透明

設定元素的透明度 moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明但是當我們對乙個標籤設定背景的透明度時,往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明p div div 可以很明顯的看出文字也被半透明...

css實現背景透明文字不透明

moz opacity 0.8 在firefox中設定元素透明度 filter alpha opacity 80 ie使用濾鏡設定透明 但是當我們對乙個標籤設定背景的透明度時,往往我們並不希望該標籤上的文字也變成半透明了。例如 不透明 div可以很明顯的看出文字也被半透明的,這是我們不想看到的效果。...