为图像添加不透明度

Question

我无法实现透明度

我想在这些图像中使用黑色不透明度但仅在一个图像中完成

.page1 {
  background: url(../images/durbarPavillions.jpg) no-repeat fixed;
  width: 100%;
  height: 600px;
  margin: 0px 0px 5px 0px;
  clear: both;
}

ul.box,
ul.box1 {
  list-style: none;
}

.page2 {
  background: url(../images/everest.jpg) no-repeat fixed;
  width: 100%;
  height: 600px;
  clear: both;
}

ul.box li img,
ul.box1 li img {
  float: left;
  width: 500px;
  height: 300px;
  margin: 130px 90px 0px 0px;
}

.img1 img {
  /*opacity: 0.5;   filter: alpha(opacity=30);*/
  width: 100%;
  position: relative;
}

.img2 img {
  width: 100%;
  position: relative;
}

.img3 img {
  width: 100%;
  position: relative;
}

.img4 img {
  width: 100%;
  position: relative;
}

.page1 .blackground,
.page2 .blackground {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  width: 500px;
  height: 300px;
  margin: 130px 90px 0px 0px;
  position: absolute;
  z-index: 1;
}

<div class="page1">
  <ul class="box">
    <li class="img1"><img src="images/ebc_hero.jpg">
      <div class="blackground"></div>
    </li>
    <li class="img2"><img src="images/china.jpg">
      <div class="blackground"></div>
    </li>
  </ul>
</div>
<div class="page2">
  <ul class="box1">
    <li class="img3"><img src="images/china2.jpg">
      <div class="blackground"></div>
    </li>
    <li class="img4"><img src="images/foot.jpg">
      <div class="blackground"></div>
    </li>
  </ul>
</div>

Answer 1

您可以将图像转换为a的背景图像，然后添加以下css：

background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url('image.jpg');