第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

我可以僅將不透明度設(shè)置為div的背景圖像嗎?

我可以僅將不透明度設(shè)置為div的背景圖像嗎?

catspeake 2019-08-02 16:44:48
我可以僅將不透明度設(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偽元素。:beforeIE版本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è)試用例:


查看完整回答
反對(duì) 回復(fù) 2019-08-02
?
慕森卡

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");



查看完整回答
反對(duì) 回復(fù) 2019-08-02
?
紫衣仙女

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>


查看完整回答
反對(duì) 回復(fù) 2019-08-02
  • 3 回答
  • 0 關(guān)注
  • 641 瀏覽

相關(guān)問(wèn)題推薦

慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)