html - 如何用颜色创建叠加效果

Question

我想知道如何进行叠加，但前面有颜色。 例如:

.hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

.hover:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

<div class="col-sm-4  hover ">
  <img src="https://placehold.it/250x250?text=IMAGEE" class="img-responsive " alt="Image">
</div>

它以一些不透明度开始，我希望图像顶部的不透明度为红色。我怎样才能实现这个目标？

Answer 1

您可以依靠伪元素来创建此叠加层，然后使用 rgba() 轻松更改背景以获得具有任何不透明度的任何颜色:

.hover {
  position: relative;
  display: inline-block;
}

.hover img {
  vertical-align: top;
}

.hover:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.3);
  transition: 0.5s;
}

.hover:hover::before {
  background: rgba(255, 0, 0, 1);
}

<div class="hover ">
  <img src="https://placehold.it/250x250?text=IMAGEE" class="img-responsive " alt="Image">
</div>