如何在不干擾覆蓋文本的不透明度的情況下更改CSS中圖像的不透明度

我想更改html中圖像的不透明度，但不希望更改覆蓋在其上的文本的不透明度。如何在不干擾覆蓋文本的不透明度的情況下更改CSS中圖像的不透明度

這是我的html代碼： -

<div class="image"> 
<img src = "C:/Users/Anmol/Desktop/NewSite/Images/background/bg_4.jpg"> 
<div class="text"> 
<h1>My Site</h1> 
</div> 
</div>

，這是它的CSS代碼： -

.image{ 
     opacity: 0.5; 
     margin: 0px 0px 0px 0px 
     } 
.image .text { 
       position:absolute; 
       text-align: center; 
       top:10px; 
       right:500px; 
       width:300px; 
       }

請告訴我，我怎麼能做到這一點（如果可能的話）？

來源

2015-05-04 anmol vatsa

你不應該用你的磁盤上的圖像的絕對路徑的工作：有些操作是不可能的，由於同源策略的限制，你就會有反正部署時，將其更改爲相對路徑。 –

它只是用於測試目的，否則我只會使用相對路徑。 –

不，你不能直接這樣做，一個子元素的透明度不能超過其父元素的透明度。

你的情況，最簡單的解決方案是不使文本圖像的孩子（有圖像，並在同一水平，例如文本）：

.holder { 
 
    position: relative; 
 
} 
 
.image{ 
 
    opacity: 0.5; 
 
    margin: 0px 0px 0px 0px 
 
} 
 
.text { 
 
    position:absolute; 
 
    text-align: center; 
 
    top:10px; 
 
    width:300px; 
 
}

<div class=holder> 
 
    <div class="image"> 
 
    <img src = "http://i.imgur.com/IQRCO5Lm.jpg"> 
 
    </div> 
 
    <div class="text"> 
 
    <h1>My Site</h1> 
 
    </div> 
 
</div>

來源

2015-05-04 08:14:07

相反給父母的div賦予不透明性給img本身。這種方式不透明將影響圖像只留下您的文本。

img{ opacity: 0.5 }

來源

2015-05-04 11:05:51 Ranjith

如何在不干擾覆蓋文本的不透明度的情況下更改CSS中圖像的不透明度

回答

相關問題