Question

今天可以在一个div上进行透明的颜色叠加过程吗？例如，如果我有以下HTML代码

<div class="flower">
</div>

我有以下HTML ...

.flower { 
  width:320px; 
  height:240px; 
  background: url(img/flower.png) no-repeat; 
  border:5px solid #000000; 
 } 
  .flower:after { 
  background:#FF2400; opacity:0; 
  } 

  .flower:after:hover { 
  opacity:0.7; 
   }

所以当有人在这上面盘旋时，他们会看到一朵有色的红色花朵。我们今天可以用一个div来做这样的事吗？

Answer 1

至少有两种方法可以做到这一点。

方法1。

覆盖整个div。

注意。这也会影响div内的任何内容。

.box {
  width: 200px;
  height: 200px;
  margin: 25px;
  display: inline-block;
}
.overlay {
  position: relative;
  background: url(http://lorempixel.com/output/nature-q-c-200-200-4.jpg);
}
.overlay:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 1);
  opacity: 0;
}
.overlay:hover:after {
  opacity: .5;
}

<div class="box overlay">
</div>

方法2。

由于您使用的是背景图像，我们可以通过具有单一颜色和RGBA属性的线性渐变在第一个图像的顶部添加另一个背景图像。

.box {
  width: 200px;
  height: 200px;
  margin: 25px;
  display: inline-block;
}
.bgimage {
  background: url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}
.bgimage:hover {
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(http://lorempixel.com/output/nature-q-c-200-200-3.jpg);
}

<div class="box bgimage">
</div>

这样做的好处是不会影响div的内容。

我确信还有其他方法，但这些是我想到的前两种方法。

CSS - 在单个div容器上创建一个Tinted After Overlay

1 个答案: