Jak zmienić nieprzezroczystość koloru tła w CSS

Question

Mam plik PNG, który nadaje kolor tła jego przezroczystym obszarom, ale chciałbym, aby kolor tła był nieco przezroczysty, jak na przykład nieprzezroczystość. Oto mój kod do tej pory:

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

Answer 1

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

można użyć rgba do nieprzejrzystości, będzie działać tylko w IE9 + i lepszych przeglądarek

Answer 2

Zastosowanie RGBA tak: background-color: rgba(255, 0, 0, .5)

Answer 3

użytkowania RGB wartości w połączeniu z kryciem, aby uzyskać pożądaną przezroczystość.

Przykładowo

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

Podobnie rzeczywistych wartości bez zmętnienia, da poniżej.

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

Możesz spojrzeć na to WORKING EXAMPLE.

Teraz, jeśli specjalnie kierujemy się Twoim problemem, oto 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:

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

Nadzieja to pomaga teraz.

Answer 4

Niezbyt jasne, aby dodać krycie za pomocą CSS, jest dobrym pomysłem.
Krycie w zabawny sposób można zastosować do wszystkich treści i dzieci z miejsca, w którym zostało ustawione, z nieoczekiwanymi efektami w mieszanych kolorach.
W moim przypadku nie ma to żadnego celu, jak na kolor bg, według mnie.
Jeśli chcesz umieścić wskaźnik myszy na obrazie, możesz użyć wielu tła.
kolor ten może być przezroczysty applyed przez dodatkowy PNG wielokrotnego (lub nie z tłem pozycji)
CSS gradientu (promieniowa) liniowy gradient kolorów rgba (rozpoczęcia i zakończenia z tego samego koloru) może osiągnąć to również. Są traktowane jako obrazy tła i mogą być używane jako filtr.
Idem dla tekstu, jeśli chcesz, aby były nieco przezroczyste, użyj rgba (dobrze, aby umieścić tekst-cień razem).

Myślę, że dziś możemy rzucić zabawne zachowanie nieprzezroczystości CSS.

Tutaj jest mieszany z RGBA wykorzystywanych do nieprzejrzystości jeśli jesteś ciekaw dabblet.com/gist/5685845

Answer 5

Zastosowanie rgba jak większość powszechnie używanych przeglądarek obsługuje go ..

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