如何在圖像上用CSS

Question

添加一個覆蓋顏色，如果我有像這樣的圖像：

<img src="inshot1.jpg" width="100px" height="100px">​​​​​​​ 

和懸停我想該塊而彩色覆蓋。因此，例如，當您將鼠標懸停在上面時，您會看到一塊具有相同高度和寬度的紅色。所以基本上疊加？

Answer 1

這是可以做到多種方式，但你可以只用一個background-color包裝在一個<div>並設置visibility: hidden圖像上:hover

HTML：

<div><img src="img.jpg"></div> 

CSS

div { background: red; display: inline-block; } 
img { display: block; } 
div:hover img { visibility: hidden; } 

Answer 2

這裏有兩個w你可以做到這一點 - 都涉及到包裝圖像包含元素。

使用容器的背景

可以包含元素的背景設置爲紅色，然後降低懸停圖像不透明度：

的HTML看起來像這樣：

<!-- Uses background color to fade color from behind. --> 
<div id="background"> 
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" /> 
</div> 

而CSS看起來像這樣：

div { position: relative; float: left; } 
img { display: block; } 

#background { background: red; } 
#background:hover img { opacity: 0.5; } 

使用同級元素

可以通過嵌套一個空的跨度，並用它作爲絕對定位的兄弟姐妹可作爲覆蓋。檢查了這一點 - 這裏的HTML：

<!-- Uses empty span to overlay color. --> 
<div id="overlay"> 
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" /> 
    <span></span> 
<div>​ 

而CSS是這樣的：

div { position: relative; float: left; } 
img { display: block; } 

#overlay span { 
    background: red; 
    bottom: 0; 
    display: block; 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 1; 
} 

#overlay:hover span { opacity: 0.5; } 

你可以在這裏嘗試每個解決方案的演示：

http://jsfiddle.net/jimjeffers/mG78d/1/

可能的竅門

重要的是要注意，爲了使包含元素與圖像大小相匹配，您需要執行以下四項操作之一：

1. 浮動包含元素。
2. 絕對放置包含元素。
3. 設置要顯示的包含元素：inline-block。
4. 顯式設置包含元素的高度和寬度以匹配圖像的尺寸。

在我的jsfiddle示例中，我將div設置爲float：left ;.