CSS

Question

'da arka plan rengi opaklığı nasıl değiştirilir Saydam alanlarına bir arka plan rengi verdiğim bir PNG dosyasına sahibim, ancak arka plan rengini saydamlık gibi saydam bir hale getirmek istiyorum.

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
} 

Answer 1

background: rgba(0,0,0,.5); 

sadece IE9 + ve daha iyi tarayıcılar

böyle

Answer 2

Kullanım RGBA çalışacak, opaklık için RGBA kullanabilirsiniz:: background-color: rgba(255, 0, 0, .5)

Answer 3

Kullanım RGB İşte şimdiye kadar benim kodudur İstediğiniz şeffaflığı elde etmek için opacity ile birleştirilmiş değerler. Örneğin

,

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">&nbsp;</div> 

Benzer şekilde, opaklık olmayan gerçek değerleri, aşağıdaki verecektir.

<div style=" background: rgb(243, 191, 189) ; ">&nbsp;</div> 
<div style=" background: rgb(246, 143, 142) ; ">&nbsp;</div> 
<div style=" background: rgb(249, 95 , 94) ; ">&nbsp;</div> 
<div style=" background: rgb(252, 47, 47) ; ">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0)  ; ">&nbsp;</div> 

Bu WORKING EXAMPLE bir göz olabilir.

Sorununuzu özellikle hedefliyorsak, işte WORKING DEMO SPECIFIC TO YOUR ISSUE.

HTML

<div class="social"> 
    <img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" /> 
</div> 

CSS: Bu şimdi yardımcı

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
    cursor:pointer; 
    background: rgb(255, 0, 0) ; opacity: 0.5; 
} 

Umut.

Answer 4

CSS ile opaklık eklemediğinizden emin olmak o kadar iyi bir fikir değildir.
Opaklık, tüm içeriklere ve childs'lara ayarladığınız ve karışık renklerdeki beklenmedik sonuçlarla uygulanabilecek eğlenceli bir yönteme sahiptir.
Bu durumda, bg rengi için, benim fikrimce gerçekten bir amacı yoktur.
Eğer bg görüntüsünün üzerine gelmesini istiyorsanız, birden çok arka plan kullanabilirsiniz.
tekrar fazladan PNG ile applyed olabilir şeffaf (veya arka plan konum ile) bu renk, (başlangıç ​​ve aynı renk ile biten) elde edebilirsiniz RGBA renk ile
CSS gradyan (radial-) doğrusal gradyan bu da. Arka plan görüntüsü olarak kabul edilirler ve filtre olarak kullanılabilirler.
Metin için kullanmayın, biraz saydam isterseniz, rgba kullanın (tamamıyla birlikte metin gölgesi koymak için).

Bugün, CSS opaklığının eğlenceli davranışlarını bırakabiliriz. Yaygın olarak kullanılan tarayıcıların çoğu onu destekleyen gibi meraklı dabblet.com/gist/5685845

Answer 5

Kullanım RGBA ise burada

opaklık için kullanılan RGBA bir karışık ..

.social img:hover { 
background-color: rgba(0, 0, 0, .5) 
}