<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 css
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
我正在使用应用了背景图像的元素。当我将鼠标悬停在这个元素上时，相同的背景图像应该会褪色一点。不使用第二张图片是否可行。
最佳答案
执行此操作的最简单方法是在包含图像的元素上设置一个透明层并将其淡入淡出。 See this JSFiddle一个工作示例。
CSS
.example {
height: 80px;
width: 200px;
background: url(http://lorempixel.com/400/200/) 50% 50% no-repeat;
background-size: cover;
}
.example:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
opacity: 0;
position: relative;
transition: .3s all;
}
.example:hover:after {
opacity: 0.8;
}
请注意，转换需要前缀才能在所有浏览器中工作。
HTML
<div class="example"></div>
关于css - 如何在使用 css 悬停元素时淡化背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33935551/