CSS에서 배경색의 불투명도를 변경하는 방법

Question

투명 영역에 배경색을 지정하는 PNG 파일이 있지만 불투명도 같은 배경색을 약간 투명하게 만들고 싶습니다.

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

Answer 1

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

만 IE9 + 더 나은 브라우저

이 같은

Answer 2

사용 RGBA에서 작동, 불투명도에 대한 RGBA를 사용할 수 있습니다 : background-color: rgba(255, 0, 0, .5)

Answer 3

사용 RGB 여기에 지금까지 내 코드입니다 값을 불투명도과 결합하여 원하는 투명도를 얻으십시오. 예컨대

,

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

마찬가지로, 불투명도없이 실제 값은 아래 제공된다.

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

이 WORKING EXAMPLE을 살펴볼 수 있습니다.

특별히 문제를 타겟팅하는 경우 여기 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; 
} 

희망.

Answer 4

CSS를 통해 불투명도를 추가 할 수 있는지 여부는 좋은 생각입니다.
불투명도는 예기치 않은 결과와 함께 색상을 혼합하여 설정 한 위치에서 모든 콘텐츠와 하위 항목에 재미있는 방법을 적용 할 수 있습니다.
Bg 컬러의 경우에는 그럴 의도가 없습니다.
bg 이미지를 가리 키려면 여러 배경을 사용할 수 있습니다.
반복 엑스트라 PNG 통해 applyed 수있는 투명 (또는없는 배경 위치)와이 컬러 (시작 동색으로 끝나는) 달성 할 수 RGBA 색상 와
CSS 그라데이션 (radial-) 선형 구배 이뿐 만 아니라. 그들은 배경 이미지로 취급되며 필터로 사용할 수 있습니다.
텍스트를위한 Idem, 조금 투명하게하려면 rgba를 사용하십시오 (텍스트 그림자를 함께 사용하십시오).

저는 오늘, 우리는 CSS 불투명도의 우스운 행동을 떨어 뜨릴 수 있다고 생각합니다. 일반적으로 사용되는 대부분의 브라우저가 지원하는 당신이 호기심 dabblet.com/gist/5685845에게

Answer 5

사용 RGBA 경우 여기

은 불투명도에 사용 RGBA의 혼합입니다 ..

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