CSS 悬停时的深色背景不透明度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27847518/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:53:42  来源:igfitidea点击:

Dark background opacity on hover

csshover

提问by Omar

I have this CSS. When you hover the image background turns a white opacity, but I'd like it to turn a dark opacity. I tried adding a dark background color but nothing.

我有这个 CSS。当您将鼠标悬停时,图像背景会变成白色不透明度,但我希望它变成深色不透明度。我尝试添加深色背景色,但没有。

.img-container .img-item a.image:hover img {
   opacity: .2;
   filter: alpha(opacity=50);
   background-color: rgba(0, 0, 0, 0.5);
   transition: all 1s;
   -webkit-transition: all 1s;
    }

回答by Adam Cherti

Put your img in a div with bg color dark and opacity 0.5 And give z-index for the div a bigger value than for img.

将你的 img 放在一个 bg 颜色为深且不透明度为 0.5 的 div 中,并为 div 提供比 img 更大的 z-index 值。

#imgcontainer
{
opacity:0.5;
background-color: Black;
z-index:10;
}
#imgcontainer img
{
      Z-index: 5;
}

回答by user3632930

you can't add background to an image, instead, you can add background-colorat parent element.

您不能为图像添加背景,相反,您可以background-color在父元素中添加。