Question

CSS中的opacity属性有一个奇怪的问题。所以，我想要一个悬停效果，图像应该得到透明的绿色叠加。似乎不透明度仅适用于叠加颜色（当您降低不透明度时它会变浅，但叠加下的图像不会出现）。我也尝试用rgba解决问题，但没有成功。

这有点难以解释，所以这里是小提琴：http://jsfiddle.net/4T3dc/3/

    <style>
        .col-sm-4 {
          padding-top: 20px;
        }
        .col-sm-4 .img-responsive {
          width: 350px;
          height: 350px;
          cursor: pointer;
        }
        .col-sm-4 .img-responsive#one-image {
          background: url(http://shrani.si/f/e/jm/42FHXzWF/cover.png);
        }

        .col-sm-4 .img-responsive#one-image:hover {
          background: #1abc9c;
          opacity: 0.3;
        }
</style>

<div class="row">
    <div class="col-sm-4">
        <div class="img-responsive img-rounded" id="one-image"alt="Responsive image">
        </div>
    </div>
</div>

谢谢！

Answer 1

您可以使用:after添加绿色/不透明度悬停效果。

Example on JSFiddle.

对CSS进行以下更改：

.col-sm-4 .img-responsive#one-image {
    position: relative;
}
.col-sm-4 .img-responsive#one-image:hover:after {
    background: #1abc9c;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content:"";
}

Answer 2

如果您使用的是CSS3，则可以使用-webkit-filter。

-webkit-filter: hue-rotate(240deg) saturate(0.6);

喜欢这个小提琴：http://jsfiddle.net/4T3dc/6/

我不完全确定你的描述是否符合要求。但是，您可以使用此网站调整效果以获得您想要的内容： http://html5-demos.appspot.com/static/css/filters/index.html

Answer 3

您的CSS目前所做的并不是在背景图像上叠加颜色 - 相反，它会完全用您指定的颜色替换背景图像，并赋予其不透明度。实现您的建议的一种方法是使用实际的<img>元素，并使用其容器的背景（.col-sm-4 .img-responsive#one-image）通过更改图像来模拟重叠的颜色不透明度。

所以你的HTML会稍微转移到：

<div class="row">
    <div class="col-sm-4">
        <div class="img-responsive img-rounded" id="one-image" alt="Responsive image">
            <img src="http://shrani.si/f/e/jm/42FHXzWF/cover.png">
        </div>
    </div>
</div>

您的新CSS样式定义将是：

.col-sm-4 .img-responsive#one-image img {
    width:100%;
}
.col-sm-4 .img-responsive#one-image {
    background:#1abc9c;
}
.col-sm-4 .img-responsive#one-image:hover img {
    opacity: 0.7; /* 1 - 0.3, where 0.3 is the desired opacity of the colour overlay */
}

这里有JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

CSS Opacity属性不应该应用于：悬停状态

3 个答案: