两个图像叠加？

-3

我想使用两个图像叠加层，使用jQuery将图像叠加在图像的顶部。两个图像叠加？

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

实际上有3个图像：图像本身和两个覆盖图像。

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

我目前使用下面的jQuery作为鼠标悬停叠加层，但我还需要一个“始终有效”的叠加层。

<script type="text/javascript"> 

$(document).ready(function() { 

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

}); 

</script>

来源

2015-05-11 bjc999

_I希望这是足够的信息._ ...是的，这可能是，但它会是一个更清晰的问题，并有一定的努力。我们不是为你工作，我们在这里帮助你了解你已经尝试过的东西。 – briosheje

绝对如此。我目前使用下面的代码的鼠标悬停覆盖： <脚本类型= “文本/ JavaScript的”> $（文件）。就绪（函数（）{ \t \t $（）悬停 '褪色'。。（ \t \t函数（）{ \t \t \t $（本）.find（ '瓦片覆盖。'）淡入（300）; \t \t}， \t \t函数（）{ \t \t \t $（这一点）.find（ '瓦覆盖'）。淡出（ 250）; \t \t} \t）; \t }）; 但我需要一个'永远活跃'的覆盖层，以及我坚持。任何帮助都会很棒。谢谢。 – bjc999

你可以在css中做到这一点，没有任何额外的图像。只需在图像上方使用半透明的黑色“div”并更改透明度即可。或者一个黑色的背景，并改变图像的不透明度... – jeroen

如果你想创建一个覆盖，你可以去一个纯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兼容性。

来源

2015-05-11 08:18:55

非常感谢:-) – bjc999

两个图像叠加？

回答

相关问题