Question

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

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

（img是此CSS代码中用于tumblr图像的属性）

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用CSS伪元素:after实现您想要的目标。

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

见下面的工作示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 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%;
}

颜色叠加+淡化

2 个答案: