Question

当你将鼠标悬停在图像上时，我试图添加彩色透明叠加层（任何颜色：紫色，蓝色，红色，橙色都很棒），但我得到的是白色透明叠加层。请注意，我使用自举网格，以便我的图像保持响应。我已经尝试了所有我能想到的...添加背景颜色：蓝色有一些不透明度，但我卡住了。白色叠加看起来没问题，但我希望有一些颜色的乐趣。请参阅下面的代码并告诉我需要做什么。非常感谢！

<div class="container">
        <div class="row">
            <div class="hover12 col-lg-3 col-sm-4 col-xs-6">
                <a href="#" class="thumbnail">
                     <img src="images/flowers4.jpg" class="img-responsive">
                </a>
            </div>
             <div class="hover12 col-lg-3 col-sm-4 col-xs-6">
                <a href="#" class="thumbnail">
                     <img src="images/flowers5.jpg" class="img-responsive">
                </a>
            </div>
     </div> <!-- closes div row -->
</div> <!-- closes div container -->

CSS代码：

.hover12 img {
    background-color: blue;
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover12 img:hover{
    opacity: .5;
}

Answer 1

opacity淡出整个元素，包括其背景，它不会使内容透明，背景透过。您想要做的是要么在图像下放置一个带有颜色的元素（可能是蓝色）并使图像不透明（使用opacity），要么隐藏并在图像顶部显示一个元素透明度。

这是一个例子。在悬停时，图像变为50％不透明，您可以看到它下方的蓝色元素显示。

＆＃13;

.img-container {
  background-color: blue;
  display: inline-block;
  line-height: 0;
}

.img-container img:hover {
  opacity: .5;
}

＆＃13;

<div class="img-container"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQU-rOCZDSdyIGgSvZhU-lqIhG32Yd8KrwI3gWKXSCayFXQuJTx0g" /></div>

＆＃13;

编辑：

我只是再次查看你的代码并意识到你基本上是正确的，除了你在img元素上设置了背景颜色，但它应该在包含img的元素上设置，这是.thumbnail类，所以请尝试添加：

.thumbnail {
    background-color: blue;
}

Answer 2

这可能是使用覆盖图像的伪元素最好的完成。以下是如何创建覆盖图像的伪元素，并在图像翻转时降低不透明度：

＆＃13;

#theimg {
    position: relative;
    display: inline-block;
}

#theimg::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: blue;
    opacity: 1;
}


#theimg:hover::after {
    opacity: .5;
}

＆＃13;

<div id="theimg">
    <img src="https://i.imgur.com/LDR6AWn.png?1" />
</div>

＆＃13;

Answer 3

最简单的方法是使用:before制作半透明叠加层：

img:hover:before {
    content: '';
    position:absolute;
    top:0;left:0;bottom:0;right:0;
    background:rgba(0,0,255,0.3);
}

缺点是它会阻止图片被点击，当您使用CSS background而不是HTML中的<img />图像时可能会出现问题。

另一种方式，如果Internet Explorer支持不是问题（如果此效果仅适用于show，则可能就是这种情况），您可以使用CSS filter。它不像在图像上覆盖透明图像那么容易，但是你可以获得一些非常好的效果：

img.grayscale:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
img.contrast:hover { -webkit-filter: contrast(150%); filter: contrast(150%); }
img.brightness:hover { -webkit-filter: brightness(1.5); filter: brightness(1.5); }
img.hue-rotate:hover { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
img.saturate:hover { -webkit-filter: saturate(2); filter: saturate(2); }
img.blur:hover { -webkit-filter: blur(2px); filter: blur(2px); }
img.invert:hover { -webkit-filter: invert(1); filter: invert(1); }
img.sepia:hover { -webkit-filter: sepia(75%); filter: sepia(75%); }

对于您的问题，我建议您使用.hue-rotate并添加CSS transition。注意：你可以组合效果！

玩滑块： http://www.cssreflex.com/css-generators/filter/或http://html5-demos.appspot.com/static/css/filters/index.html

图像悬停叠加 - 需要多彩的透明度

3 个答案: