我可以僅將不透明度設(shè)置為div的背景圖像嗎?讓我說(shuō)我有<div class="myDiv">Hi there</div>我想提出一個(gè)background-image并給它一個(gè)opacity的0.5-但我想,我寫的文字將有充分的不透明度(1)。如果我像這樣寫CSS.myDiv { opacity:0.5 }一切都將是低透明度 - 我不希望這樣。所以我的問(wèn)題是 - 如何獲得具有完全不透明度文本的低不透明度背景圖像?
3 回答

阿晨1998
TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個(gè)贊
不,這不能做,因?yàn)?code>opacity影響整個(gè)元素,包括其內(nèi)容,并沒有辦法改變這種行為。您可以使用以下兩種方法解決此問(wèn)題。
次要div
div
向容器添加另一個(gè)元素以保存背景。這是最友好的跨瀏覽器方法,甚至可以在IE6上運(yùn)行。
HTML
<div class="myDiv"> <div class="bg"></div> Hi there</div>
CSS
.myDiv { position: relative; z-index: 1;}.myDiv .bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: url(test.jpg) center center; opacity: .4; width: 100%; height: 100%;}
請(qǐng)參閱jsFiddle上的測(cè)試用例
:before和::之前的偽元素
另一個(gè)技巧是使用CSS 2.1 :before
或CSS 3 ::before
偽元素。:before
IE版本8支持偽元素,而::before
根本不支持偽元素。這有望在第10版中得到糾正。
HTML
<div class="myDiv"> Hi there</div>
CSS
.myDiv { position: relative; z-index: 1;}.myDiv:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: url(test.jpg) center center; opacity: .4;}
補(bǔ)充說(shuō)明
由于您的行為,z-index
您必須為容器設(shè)置z-index以及為z-index
背景圖像設(shè)置負(fù)數(shù)。
測(cè)試用例
請(qǐng)參閱jsFiddle上的測(cè)試用例:

慕森卡
TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊
所以這是另一種方式:
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");

紫衣仙女
TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊
CSS
div { width: 200px; height: 200px; display: block; position: relative;}div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1;}
HTML
<div> put your div content</div>
添加回答
舉報(bào)
0/150
提交
取消