如何在不干扰被覆盖文本的不透明度的情况下更改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 }