투명한 배경, 불투명 한 요소

body에 이미지 배경을두고 div에 반투명 배경을 사용하여 이미지를 볼 수는 있지만 음영 처리를하고 싶습니다. 그러나, 가장 쉬운투명한 배경, 불투명 한 요소

body { 
    background-image: ... 
} 

#main { 
    background-color: #999; 
    opacity: 0.9 
}

도 #main 내 모든뿐만 아니라 불투명 할 것, 모든 등은 img가 포함되어 있습니다.

내가 설명하는 것을 어떻게합니까?

감사

출처

2011-10-26 Amadan

RGBA가 당신을 도와하지만, 모든 브라우저에서 지원되지 않는

사용 : 당신이, 당신이해야 50 % 빨간색 배경을 원한다면 그렇게

rgba(a,b,c,d), where a = red(0-255); b = green(0-255); c = blue(0-255), d = alpha opacity(0-1)

사용

배경 : rgba (255,0,0,0.5);

출처

2011-10-26 11:17:45 Sergiu

이것은 가장 깨끗한 답변입니다. 일부 오래된 브라우저와의 호환성을 위해 반투명 PNG가 좋은 대안입니다. –

반투명 한 png는 오래된 IE 버전에 문제가 있습니다 ... 그러나이 문제조차도 해결할 수 있습니다 – Sergiu

물론!/doh 나는 오래된 브라우저를별로 신경 쓰지 않는다. 단색 배경을 얻을 수 있다고 생각하기 때문이다. 어떤 점이 저의 다음 질문으로 이어집니다 :'color : #fee; 색상 : rgba (240, 240, 255, 0.5)', 내가하는 일을 그렇게 생각합니까? IE6는 단색'# fee'를 얻습니다. 크롬은'rgba' 오버라이드를 이해합니까? IE6는 테스트 할 필요가 없습니다 :) – Amadan

당신이 반 투명 PNG 파일을 큰 픽셀의 몇 가지를 만들고 색상 당신이 다음 주의 배경 이미지로 원하는 결과를 얻을 것을를 추가 한 후 경우. 당신이 당신의 프로젝트에 대한 CSS3를 사용할 수있는 경우

출처

2011-10-26 09:20:27 ratpuddle

당신은 RGBA를 사용할 수 있습니다()

#main { 
    background-color: rgba(0, 0, 0, .5) 
}

구문은 RGBA이다 (적색, 녹색, 청색, 알파). 이렇게하면 #main의 배경이 투명하지만 콘텐츠는 보이지 않게됩니다. 여기

는 바이올린입니다 : http://jsfiddle.net/neilheinrich/FwxRX/

출처

2011-10-26 09:21:48 nheinrich

업데이트 : 바이올린을 추가했습니다. – nheinrich

투명한 배경, 불투명 한 요소

답변

관련 문제