感谢您提供的以下所有帮助和解决方案。
我是Web开发的新手，我正在尝试重建一个网站来练习CSS。
有问题的网站是http://www.divecarib.com。如果向下滚动到该主页上的图片，您会注意到它们在悬停时“淡出”。如何实现淡入淡出？使用不透明度会使背景图片通过，而这不是在该网站上实现的方式。
感谢您的帮助！
以下是我的淡入淡出尝试...未在原始文章中包含代码，因为考虑到我走错了路，我认为这无关紧要。
.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;
}
---解决方案（至少我是怎么做的-取自http://jsbin.com/igahay/1/edit?html，输出）-----
<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;
}
如果不显示背后的内容，则无法淡化元素的不透明度。
链接到的站点不会使图像不透明，而会在文本上方添加一个半透明层。
如果只想淡化图像而不显示背景，则可以使用单色背景色在图像周围放置包装纸。但是，没有办法使图像褪色并且无法显示背后的内容。
.container {
background:#FFF;
}
.container img:hover {
opacity:0.8;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句