gpt4 book ai didi

css - 如何在没有不透明度的情况下使用 CSS 淡化图像?

转载 作者:技术小花猫 更新时间:2023-10-29 11:02:55 25 4
gpt4 key购买 nike

感谢所有帮助,解决方案如下。

我是网络开发的新手,我正在尝试重建一个网站来练习我的 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,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;
}

最佳答案

你不能淡化一个元素的不透明度,而不让背后的东西透出来。

您链接到的网站并没有淡化图像的不透明度,而是在顶部引入了一个带有文本的半透明层。

如果您只想淡化图像,但不想让背景显示出来,您可以在图像周围放置一个纯色背景色的 wrapper 。但是没有办法让图像褪色而不显示背后的内容。

.container {
background:#FFF;
}

.container img:hover {
opacity:0.8;
}

关于css - 如何在没有不透明度的情况下使用 CSS 淡化图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35684344/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com