將疊加層添加到圖像

如果圖像懸停在圖像上，我想添加疊加層。將疊加層添加到圖像

我已經嘗試了很多方法，但圖像似乎消失或保持不變。

這是它的將是什麼樣子

<a id="icon" 
    style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;" 
    href="page.php?pageid=123" title="Icon"> 
</a>

實實在在地，我所追求的是一個快速的方法有圖像的變化，而無需進行更多的圖像。

所以當沒有懸停在圖像上 - 原始圖像當懸停在圖像 - 40％的顏色疊加？

謝謝先進。

我的嘗試：

a.thumbnail { 
background-color:orange; 
filter: Alpha(Opacity=40, Style=0); 
-moz-opacity: 40%; 
opacity: 0.4; 
}

來源

2012-04-13 Sam Ham

你可以發佈你試過的代碼嗎？ – 2012-04-13 18:16:42

檢查出來...... – 2012-04-13 18:20:29

顯然當我加入這個類的時候 – 2012-04-13 18:22:54

我創造出了這種不覆蓋一點小提琴，但只使用CSS給出了同樣的效果。另外，我爲了好玩扔了一些CSS過渡。基本上通過僞元素懸停顯示圖像背後創建一個div。這樣你就可以放入你的標籤，而不需要像瘋狂一樣創建CSS背景圖片。只要換出alpha的東西，使覆蓋工作的另一種方式。

http://jsfiddle.net/wesleyterry/jwXvA/#base

希望那是你所期待的。

來源

2012-04-13 19:21:52

錯誤的方式，但它的後我！它如何消失？ – 2012-04-13 19:42:53

我用CSS轉換來淡化它。如果他們的瀏覽器還不支持這些功能，那麼它會優雅地降級，只是換掉圖像上的alpha。我已經更新了小提琴，所以它現在以另一種方式工作。 http://jsfiddle.net/wesleyterry/jwXvA/ – 2012-04-13 20:05:17

因此，所有'-moz-transition：'東西都會產生很好的淡入淡出效果。 – 2012-04-13 20:06:44

基本上，如果它是一個覆蓋，你可以假設的高度和寬度可能會是一樣的。

在這個演示

我不小心使用的圖像尺寸25更改爲23

http://jsfiddle.net/raU2J/7/

<div class="overlay_wrapper"> 
    <a href="#"></a> 
    <div class="overlay"></div> 
    <img src="cake.jpg" /> 
</div> 


.overlay, 
.overlay_wrapper a, 
.overlay_wrapper { 
    width: 25px; 
    height: 25px; 
    position: relative; 
} 

.overlay_wrapper a { 
    position: absolute; 
    z-index: 10; 
    display: block; 
} 

.overlay { 
    display: none; 
    background: red; 
    position: absolute; 
    top: 0; 
    left: 0; 
    filter: Alpha(Opacity=40, Style=0); 
    -moz-opacity: 40%; 
    opacity: 0.4; 
    z-index: 9; 
}

的jQuery：

$(".overlay_wrapper").hover(
    function() { 
    $(this).find('.overlay').fadeIn(); 
    }, 
    function() { 
    $(this).find('.overlay').fadeOut(); 
    } 
);

來源

2012-04-13 18:17:20 Tallboy

這會添加一個顏色疊加嗎？ – 2012-04-13 18:29:42

實際上圖像疊加，但您可以更改顏色。 – Tallboy 2012-04-13 18:33:50

我修復了jsfiddle，使鏈接可點擊 – Tallboy 2012-04-13 18:36:55

這是不可能只用單<a>，但你可以將<a>放入容器（跨度或div）。爲容器提供所需的背景，並給a:hover一個背景色，如rgba(255, 255, 255,.4)。

如果這樣做不像您想要的那樣，請更多地解釋您的要求。

來源

2012-04-13 18:19:06

樣品演示：

html

<div class="img"><div class="overlap"></div></div>

css

.img {width:100px;height:100px;background:red;position:relative;} 
.overlap { visibility:hidden;} 
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */ -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}

來源

2012-04-13 18:37:12 Snger

將疊加層添加到圖像

回答

相關問題