gpt4 book ai didi

css - 如何使用CSS制作图片叠加效果?

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

我使用以下代码设计了一些带有 CSS 的超链接以添加背景图像(使其看起来像一个按钮):
<a class="btnImg" id="btnImgConfig" href="#"></a>

.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}

.btnImg:hover {
opacity: .2;
background-color: #878787;
}

#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}

如您所见,我试图在鼠标悬停时为图像创建更暗的效果。这是想要的效果:

Desired hover effect

但是目前效果是这样的:

Current hover effect

我知道我可以通过用较暗的版本替换悬停时的图像来轻松地做到这一点。但不知何故,我觉得在这种情况下不应该这样做。除了上面提到的,我也试过rgba{..}悬停。然而,这根本没有效果。

这是一个 JSFiddle上面的代码。

最佳答案

您也可以使用伪元素,然后覆盖。这将为您提供所需的效果。

.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
position: relative;
}
.btnImg:hover::after {
background-color: #878787;
opacity: 0.4;
position: absolute;
content: '';
width: 100%;
height: 100%;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>

关于css - 如何使用CSS制作图片叠加效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31651877/

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