颜色叠加+淡入淡出答案

【问题标题】：Colour Overlay + Fade颜色叠加+淡入淡出
【发布时间】：2018-07-24 15:42:22
【问题描述】：

所以我有一个 tumblr 博客，我想对其进行设置，以便默认情况下所有图片帖子的顶部都覆盖有颜色（几乎透明），然后当你将鼠标悬停在它上面时，它会完全淡出显示图像的原始颜色。

我一直在寻找正确的代码，但无法正常工作。下面的代码成功地从灰度中淡出，但我不想要灰度。我正在寻找可以让我添加纯色但透明的东西，然后将其淡出。有任何想法吗？ ;A;

（img 是本 CSS 代码中用于 tumblr 图片的属性）

img {
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
    
img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

&lt;img src="http://i0.kym-cdn.com/photos/images/original/001/285/460/8b6.jpg" width="300px"&gt;&lt;/img&gt;

【问题讨论】：

仅供参考，您也不需要为 img:hover 重复所有 transition: 行。 img:hover 将从 img 继承，所以你只需要说一次。另外，z-index 只使用数字（你不需要px）。

标签： css colors hover overlay

【解决方案1】：

你可以使用CSS伪元素:after来实现你想要的。

参见文档：https://www.w3schools.com/css/css_pseudo_elements.asp

请参阅下面的工作示例：

.img-wrapper {
  position:relative;
  display: inline-block;
  width: 32%;
}
.img-wrapper img{
  width: 100%;
}

.img-wrapper:after {
  position:absolute;
  display: block;
  height: 100%;
  width: 100%;
  content: '';
  background-color: #ff0000;
  top: 0;
  left: 0;
  -webkit-transition: all 0.9s ease-in-out;
 -moz-transition: all 0.9s ease-in-out;
 -o-transition: all 0.9s ease-in-out;
 -ms-transition: all 0.9s ease-in-out;
 transition: all 0.9s ease-in-out;
 opacity: 1;
}
.img-wrapper.opacity:after {
  opacity: 0.3;
}
.img-wrapper.rgba:after {
  background-color: rgba(250,0,0,.3);
}
.img-wrapper:hover:after {
  opacity: 0;
}

<div class="img-wrapper">
  <img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper opacity">
  <img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>
<div class="img-wrapper rgba">
  <img src="https://i.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg">
</div>

【讨论】：

好答案！此外，为了使图像仍然可以通过颜色叠加层看到，请将 opacity: 1; 替换为 opacity: 0.3;
你也可以使用background-color: rgba(255, 0, 0, 0.3)来改变不透明度。

【解决方案2】：

试试这个：https://jsbin.com/guyudiqafi/edit?html,css,output

HTML：

<div class="image-container">
  <img src="https://c.tadst.com/gfx/1200x630/sunrise-sunset-sun-calculator.jpg?1">
</div>

CSS：

.image-container {
  width: 300px;
  position: relative;
}

.image-container:after {
  background: #0043ff;
  opacity: 0.3;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: ' ';
  -webkit-transition: all 0.9s ease-in-out;
  -moz-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  -ms-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;
}

.image-container:hover:after {
  opacity: 0;
}

img {
  display: block;
  width: 100%;
}

【讨论】：