Question

在这种特殊情况下，如果有人将鼠标悬停在图像/ div上，我可以添加叠加颜色吗？现在我以80％显示图像，一旦有人将鼠标悬停在它上面，它将以100％显示以创建效果。有问题的图像/背景是精灵的一部分：

<div class="main">
     <a class="thumb" style="background: url(image.png) -150px 0;" href="url"></a>
     <div class="title">
        <a href="url">Text</a>
     </div>
</div>

CSS：

.thumb {
    display: block;
    background-repeat:no-repeat;
    height: 75px;
    width: 150px;
    opacity:0.8;
    filter:alpha(opacity=80);
}
a.thumb:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
}

Answer 1

你可以使用一个占据元素高度和宽度的伪类，只在元素悬停时显示。

使用rgba()提供半透明的颜色。相应地调整RGB值。

注意我relative .thumb的位置，以确保伪元素相对于其父元素绝对定位。

.thumb {
    position:relative;
    display: block;
    background-repeat:no-repeat;
    height: 75px;
    width: 150px;
    opacity:0.8;
    filter:alpha(opacity=80);
    position:relative;
}
a.thumb:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
}
a.thumb:hover:after {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    content:'';
    background:rgba(255, 0, 0, 0.3);
}

<div class="main">
    <a class="thumb" style="background: url(http://i.stack.imgur.com/KmG7H.png) -150px 0;" href="url"></a>
    <div class="title">
        <a href="url">Text</a>
    </div>
</div>

Answer 2

我认为你有两种方法可以去。第一步：创建一个带有一些背景颜色的div，它会覆盖你的图像。默认情况下，此div的不透明度为零，在悬停时它具有更多。

或者您可以考虑使用混合模式，描述here.

Answer 3

它可以通过多种方式完成，但您可以将其包装成背景颜色并设置可见性：隐藏在图像上：hover

HTML：

      <div><img src="img.jpg"></div>

CSS

  div { background: red; display: inline-block; }
   img { display: block; }
  div:hover img { visibility: hidden; }

Answer 4

我不太确定你想要什么，但我的猜测就是这个。

＆＃13;

div { 
  position: relative; 
  display: block;
  width: 150px;
  height: 75px;
}

div:after {
  content: '';
  position: absolute;
  left: 0;
  width: 150px;
  height: 75px;
  z-index: 1;
  background-color: rgba(255,0,0,.2);
  transition: 1s all;
}
div:hover:after {
  background-color: rgba(255,0,0,0);
}

＆＃13;

<div><img src="http://www.burrenbeo.com/sites/default/files/imagecache/short/images/Spring_gentian.jpg" /></div>

＆＃13;

覆盖图像上的颜色

4 个答案: