悬停时深色背景不透明度

Question

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

.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;
    }

Answer 1

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

Answer 2

将你的 img 放在 div 中，背景色深，不透明度 0.5 并为 div 提供比 img.

更大的 z-index 值

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

悬停时深色背景不透明度

Dark background opacity on hover

css

hover