兩個圖像疊加？

-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

兩個圖像疊加？

回答

相關問題