如何在没有不透明度的情况下使用 CSS 淡化图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35684344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fade an image with CSS without opacity?
提问by CZorio
Thanks for all the help, solution below.
感谢所有帮助，解决方案如下。
I am new to web development, and I am trying to rebuild a website to practice my CSS.
我是 Web 开发的新手，我正在尝试重建一个网站来练习我的 CSS。
The website in questions is http://www.divecarib.com. If you scroll down to the pictures on that home page, you notice that they "fade" on hover. How do I achieve that fade? Using opacity makes the background image come through, which is not how it's implemented on that website.
有问题的网站是http://www.divecarib.com。如果您向下滚动到该主页上的图片，您会注意到它们在悬停时“淡化”。我如何实现这种褪色？使用 opacity 可以使背景图像通过，这不是它在该网站上的实现方式。
Thank you for the help!
感谢您的帮助！
Below is my fade attempt...did not include the code in original post because I thought it was irrelevant given that I was on the wrong path.
下面是我的淡入淡出尝试......没有在原始帖子中包含代码，因为我认为这是无关紧要的，因为我走错了路。
.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;
}
---Solution (at least how I did it - taken from http://jsbin.com/igahay/1/edit?html,output)-----
---解决方案（至少我是怎么做的 - 取自 http://jsbin.com/igahay/1/edit?html,output）--
<div class=picSet>
<figure class="tint">
<p id="#p1">Student in training</p>
<p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
<img id=pic1 src="Media/pic1.jpg" />
</figure>
</div>
.tint {
position: relative;
float: left;
margin: 3px;
cursor: pointer;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.tint:hover:before {
content: "";
background: rgba(96,150,179, 0.54);
border: 5px solid #0B689A;
border-radius: 20px;
margin: 3px;
}
.tint p{
position:absolute;
top:20px;
left:20px;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 0.75em;
display: none;
color: #0B689A;
}
.tint:hover > p{
display: block;
}
采纳答案by Tom Kentell
You can't fade the opacity of an element, without having what's behind showing through.
你不能淡化一个元素的不透明度，而没有背后的东西显示出来。
The site you linked to isn't fading the opacity of the image, but introducing a translucent layer over the top with the text in.
您链接到的站点并没有减弱图像的不透明度，而是在顶部引入了一个带有文本的半透明层。
If you just want to fade the image, but not have the background show through, you could put a wrapper around the image with a solid background colour. But there's no way to fade an image and not have what's behind show through.
如果您只想淡化图像，但不想显示背景，则可以在图像周围放置一个带有纯色背景的包装纸。但是没有办法使图像褪色而不显示背后的东西。
.container {
background:#FFF;
}
.container img:hover {
opacity:0.8;
}
