nasıl css

Question

ile bir resmin üzerine bir bindirilirken renk katmak:

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

ve vurgulu taki blok bir renkte kaplı olmak istiyorum. Yani örneğin üzerine geldiğinizde aynı yüksekliğe ve genişliğe sahip bir kırmızı renk bloğu elde edersiniz. Yani temelde bir bindirme?

Answer 1

Birden yollar yapılabilir ancak sadece :hover

html resim üzerinde visibility: hidden bir background-color ile <div> alanına kaydırmak ve ayarlayabilirsiniz:

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

css

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

Answer 2

Burada iki w vardır Bunu yapabilirsiniz - her ikisi de görüntüyü içeren bir öğede sarmalamayı içerir.

Sen vurgulu üzerinde görüntüler opaklığını azaltmak sonra kırmızı içeren elementin arkaplanını ayarlayabilirsiniz ve

Kullanım Taşıyıcısı'nın Amaç:

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

:

HTML şöyle

Ve CSS şuna benzer:

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

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

kullanın Kardeş Eleman

Sen yuva boş yayılma ve bindirme olarak hizmet verebilir kesinlikle konumlandırılmış kardeş olarak kullanabilirsiniz. Şuna bak - burada HTML var: şu şekilde görünecektir

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

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

Burada her çözümün bir demo deneyebilirsiniz:

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

Olası Yakaladım

1. Float içeren eleman:Bu sizin görüntünün boyutuna uyacak şekilde içeren elemanı için sırayla dört şeyden birini yapmak gerekir dikkat etmek önemlidir.
2. kesinlikle içeren eleman yerleştirin. inline-block:
3. gösterilecek ihtiva elemanı ayarlayın.
4. açıkça görüntünün boyutlarına uyacak şekilde yükseklik ve içeren eleman genişliğini ayarlamak.

Benim jsfiddle örneğimde divları float olarak ayarladım: left;