如何在CSS中更改图像的不透明度而又不影响覆盖文本的不透明度

Question

我想更改html中图像的不透明度，但不想更改在其上覆盖的文本的不透明度。

这是我的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;
               }

请告诉我该怎么办（如果可能的话）？

Answer 1

不，您不能直接做到这一点，子元素的不透明度不能大于其父元素的不透明度。

在这种情况下，最简单的解决方案是不要使文本成为图像的子级（例如，使图像和文本处于同一级别）：

 .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> 

Answer 2

与其给父div赋予不透明度，不如给img本身赋予不透明度。 这样，不透明度将影响图像，仅留下您的文本。

img{ opacity: 0.5 }