làm thế nào để thêm một màu bao phủ trên một hình ảnh với css

Question

nếu tôi có một hình ảnh như vậy:

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

và trên di chuột Tôi muốn khối đó được bao phủ trong một màu. Vì vậy, ví dụ khi bạn di chuột qua nó, bạn sẽ nhận được một khối màu đỏ với cùng chiều cao và chiều rộng. Vậy lớp phủ cơ bản?

Answer 1

Nó có thể được thực hiện theo nhiều cách nhưng bạn chỉ có thể bọc nó trong một <div> với một background-color và thiết lập visibility: hidden vào hình ảnh trên :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

Dưới đây là hai w ays bạn có thể làm điều này - cả hai liên quan đến gói hình ảnh trong một phần tử có chứa.

Sử dụng nền của container

Bạn có thể đặt nền của phần tử có chứa thành màu đỏ và sau đó giảm những hình ảnh mờ đục trên di chuột:

HTML trông như thế này:

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

Và CSS trông giống như sau:

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

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

Sử dụng phần tử anh chị em

Bạn có thể lồng một khoảng trống và sử dụng nó làm anh em hoàn toàn có vị trí có thể làm lớp phủ. Check this out - đây là 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>​ 

Và CSS sẽ trông như thế này:

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; } 

Bạn có thể thử một bản demo của mỗi giải pháp ở đây:

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

Có thể Gotcha

Điều quan trọng cần lưu ý là để phần tử chứa phù hợp với kích thước hình ảnh của bạn, bạn cần phải thực hiện một trong bốn điều sau:

1. Làm nổi phần tử chứa.
2. Tuyệt đối định vị phần tử chứa.
3. Đặt phần tử chứa để hiển thị: inline-block.
4. Đặt rõ chiều cao và chiều rộng của phần tử chứa để khớp với kích thước của hình ảnh.

Trong ví dụ jsfiddle của tôi, tôi đặt divs to float: left ;.