Question

我想使用两个图像叠加层，它们使用jQuery叠加在图像上。

第一个叠加层始终处于活动状态，使图像的阴影稍暗。第二个（较暗的覆盖）在鼠标悬停时激活，以进一步变暗。

实际上有3个图像：图像本身和两个叠加图像。

图片必须如下编码：<img src="image.jpg" />并且不能是背景图片，因为它是响应式布局。

我目前正在使用以下jQuery进行鼠标悬停覆盖，但我需要一个始终有效的＆＃39;也是叠加。

<script type="text/javascript">

$(document).ready(function() {

    $('.fade').hover(
        function(){
            $(this).find('.tile-overlay').fadeIn(300);
        },
        function(){
            $(this).find('.tile-overlay').fadeOut(250);
        }
    );

});

</script>

Answer 1

如果你想创建一个叠加层，你可以选择仅支持CSS的解决方案，因为它几乎适用于任何浏览器。

这是一个JS小提琴：http://jsfiddle.net/pp7x5oL2/

您基本上提供基本样式并使用CSS >来显示字幕：

.element {
    width: 300px;
    height: 300px;
}

.element img {
    width: 100%;
    height: auto;
}

.caption-bg {
    display: block;
    width: 100%;
    height: 40px;
    background-color: #000;
    margin-top: -40px;
    position: relative;
    opacity: 0;
}

.caption {
    display: block;
    width: 100%;
    height: 30px;
    color: #FFF;
    font-family: normal;
    font-size: 16px;
    margin-top: -30px;
    position: relative;
    opacity: 0;
    z-index: 2;
}

.element:hover > .caption-bg {
    opacity: 0.4;
}

.element:hover > .caption {
    opacity: 1;
}

你的HTML：

<div class="element">
    <img src="http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" alt=" ">
        <div class="caption-bg"></div>
        <div class="caption">Hello World</div>
</div>

对于这个特殊情况，我个人更喜欢使用opacity，所以我也可以为标题添加转换，最后，让它显示在较旧的浏览器中。您也可以使用filter: alpha(opacity=XX)添加一些IE兼容性。

两个图像叠加？

1 个答案: