jak dodać przykrywający kolor na obrazku z css

Question

jeśli mam obraz tak:

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

i przy aktywowaniu Chcę że blok zostać pokryte w kolorze. Na przykład po najechaniu na nią otrzymujesz blok czerwonego koloru o tej samej wysokości i szerokości. Więc w zasadzie nakładka?

Answer 1

Można to zrobić na wiele sposobów, ale można po prostu zawinąć go w <div> z background-color i ustawić visibility: hidden na zdjęcie :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

Oto dwa w ays możesz to zrobić - oba obejmują owijanie obrazu w element zawierający.

tle wykorzystania kontenera

Można ustawić tło elementu zawierającego na czerwono, a następnie zmniejszyć zdjęć krycie przy aktywowaniu:

HTML wygląda następująco:

<!-- 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 wygląda tak:

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

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

Użyj Rodzeństwo Element

Można gniazdo pusty rozpiętość i używać go jako absolutnie umieszczonej rodzeństwo, które mogą służyć jako nakładka. Sprawdź to - oto 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>​ 

I CSS będzie wyglądać następująco:

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

Można wypróbować demo każdego roztworu tutaj:

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

Możliwe Gotcha

Należy pamiętać, że aby element zawierający element był zgodny z rozmiarem obrazu, należy wykonać jedną z czterech czynności:

1. Przepełnij element zawierający.
2. Całkowicie ustaw element zawierający.
3. Ustaw element zawierający do wyświetlenia: blok inline.
4. Jawnie ustaw wysokość i szerokość elementu zawierającego pasujące do wymiarów obrazu.

W moim przykładzie jsfiddle ustawiam divs na float: left ;.