如何在没有不透明度的情况下使用CSS淡入图像？

感谢所有的帮助，下面是解决方案

我对网络开发是新手，我正在尝试重建一个网站来练习CSS

有问题的网站是。如果您向下滚动到该主页上的图片，您会注意到它们在悬停时会“褪色”。我如何实现这一目标？使用不透明度可以使背景图像通过，而不是在该网站上实现

谢谢你的帮助

下面是我的淡入淡出尝试…没有在原始帖子中包含代码，因为我认为这与我走错了路无关

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.7;
      }

---解决方案（至少我是如何做到的-从

接受培训的学生
SKAT船员正在进行公开水域训练

.tint{
位置：相对位置；
浮动：左；
保证金：3倍；
光标：指针；
}
.tint:以前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
.tint:悬停：之前{
内容：“；
背景：rgba（96150179,0.54）；
边框：5px实心#0B689A；
边界半径：20px；
保证金：3倍；
}
.tint p{
位置：绝对位置；
顶部：20px；
左：20px；
保证金：0；
填充：0；
字体系列：无衬线；
字体大小：0.75em；
显示：无；
颜色：#0B689A；
}
.tint:悬停>p{
显示：块；
}

如果不让后面的内容显示出来，就无法减弱元素的不透明度

你链接到的站点并没有减弱图像的不透明度，而是在顶部引入了一个半透明层，文本在其中

如果你只想淡入淡出图像，而不想让背景显示出来，你可以在图像周围用一个纯色背景包装。但是，没有办法使图像淡入淡出，而不让背景显示出来

.container {
     background:#FFF;
}

.container img:hover {
     opacity:0.8;
}

---

我们希望你至少尝试自己编写代码。堆栈溢出不是一种代码编写服务。我建议你做一些额外的研究，要么通过谷歌，要么通过搜索来尝试。如果你仍然有问题，请带着你的代码回来，解释你尝试了什么以及为什么它不起作用。但作为提示。。。这不是不透明度…这是一个透明的颜色覆盖。如果你搜索Stack Overflow图像上的文本，你会发现很多例子…包括如何使背景颜色部分透明。谢谢你，这就是我一直在寻找的。在不知道它的实际名称的情况下搜索答案时遇到了一些困难。我应该是请在此问题中发布相关代码，或在在线代码编辑器（如或）中发布，以简化协作调试。这包括重新创建图片淡入淡出问题所需的CSS、HTML和Javascript。