Question

我们如何创建效果，如下图所示？

Answer 1

＆＃13;

div.background {
  background: url("https://image.ibb.co/enR1O5/bg.jpg") repeat;
 width:100%
}

div.transbox {

  background-color: #ffffff;

  opacity: 0.7;
  filter: alpha(opacity=60); /* For IE8 and earlier */
 width:30%;
 Height:300px;
}

div.transbox p {

  font-weight: bold;
  color: #000000;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Transparent part.</p>
  </div>
</div>

</body>
</html>

＆＃13;

Answer 2

可以使用:before或:after伪元素：

创建此叠加层

<强> HTML：

<div class="image-holder">
  <img src="https://i.imgur.com/waDgcnc.jpg" />
</div>

必要的CSS：

.image-holder {
  position: relative;
}
.image-holder:before {
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  content: '';
  width: 20%;
  bottom: 0;
  left: 0;
  top: 0;
}

.image-holder {
  position: relative;
  overflow: hidden;
}
.image-holder:before {
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  content: '';
  width: 20%;
  bottom: 0;
  left: 0;
  top: 0;
}
.image-holder img {
  display: block;
  height: auto;
  width: 100%;
}

<div class="image-holder">
  <img src="https://i.imgur.com/waDgcnc.jpg" />
</div>

Answer 3

以下是您的解决方案Jsfiddle link

<div class="img-background">
<div class="img-transparent">
</div>
</div>
.img-background{
  width:100%;
  float:left;
  background-image:url("https://www.w3schools.com/css/img_lights.jpg");
  height:400px;
}
.img-transparent
{
  background-color:#fff;
  width:20%;
  float:left;
   height:400px;
   opacity:0.5;
z-index:1;
}

Answer 4

使用css-blend-modes也可以实现这种效果。这允许您更改效果。

.image {
  background-image: url(https://image.ibb.co/enR1O5/bg.jpg);
  height: 320px;
  width: 512px;
  position: relative;
}

.image:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100px;
  background-image: url(https://image.ibb.co/enR1O5/bg.jpg);
  background-color: rgba(255, 255, 255, 0.4);
  background-blend-mode: lighten;
}

CODEPEN DEMO

如何在图像上方创建图层（具有不透明度）？

4 个答案: