전체 내용에 영향을주는 불투명도

트위터는 이러한 투명성을 어떻게 구현합니까?전체 내용에 영향을주는 불투명도

enter image description here

내 코드에 투명도를 추가하는 시도하지만 모든 아이들 요소가 영향을 받고있다. 제가 목표로 한 것은 위의 이미지와 다소 비슷합니다. 내가 어떻게 그럴 수 있니? 그것에 대한 올바른 CSS 규칙이 불투명합니까?

2012-08-02 user962206

이 효과를 얻으려면 opacity 대신 RGBa을 사용해보십시오. 불투명도 속성은 모든 자식 요소도 투명하게 만들고 강제로 해결할 수있는 간단한 방법은 많지 않습니다. RGBa는 요소를 투명하게 만들지 만 모든 자식 요소는 변경되지 않습니다.

예 : RGBA에

div { 
    background: rgba(10, 10, 10, 0.5); 
}

처음 세 숫자는 RGB 값의 색을 나타내고; 네 번째는 투명도를 나타내며 0.0과 1.0 사이 여야합니다 (불투명도 속성과 유사).

가

2012-08-02 13:06:54 JSW189

배경색 : RGBA (255, 255, 255, 0.5);

2012-08-02 13:07:03

고마워요! 이것은 어떻게 든 그것에 가깝습니다. 그러나 이것은 할 것이다! 이것에 발전기를 사용 했습니까? – user962206

제너레이터가 없다면, 그것은 솔리드 (1)와 클리어 (0) 사이의 알파 값을 네 번째 값으로 갖는 단지 rgb 트리플렛입니다. –

CSS 불투명도는 항상 그런 식으로 작동합니다. 항상 반투명 PNG를 배경으로 사용할 수 있습니다.

2012-08-02 13:07:11

답변