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

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.

关于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:"";
}