두 개의 투명 배경 이미지를 오버레이하는 방법

Question

두 개의 다른 div 이미지를 오버레이해야합니다. 투명 PNG를 사용하고 있지만 두 번째 오버레이를 오버레이 할 때 두 번째 오버레이는 첫 번째 효과에 영향을 미칩니다. 잃어버린. 나는 이것이 알파 채널 때문일지도 모르지만 둘러보기에 대한 정보가 없다는 것을 읽었습니다. 누군가 해결책을 가르쳐 줄 수 있습니까?

나는 스프라이트를 사용하고을 참고하고 거기에서 두 이미지를하시기 바랍니다, jQuery를뿐만 아니라 포함되어, 내가 불투명 사용할 수 없습니다, 투명한 이미지를 사용할 필요가 (내가 JS jQuery와 솔루션을 받아 들일 것), 결합 할 수 없습니다 이미지들. 나는 현재 하단 레이어에 z-index: 1;을 사용하고 있고 상단에는 z-index:2;을 사용하고 있으므로 세 번째 이미지가있을 수 있으므로 솔루션은 두 이미지 위에 중첩하지 말고 2+ 이미지를 오버레이해야합니다.

감사합니다.

The Image I am using

추가에게 fiddle with comment in the JS section

A screenshot of the result 통지를 왼쪽 상단 모서리에있는 잎 사이의 흰색과는 약간의 먼지

솔루션이 포함 된 35px 광장 있어야하는데 :

를

CSS를 사용하고 background-color: transparent;을 추가하면 div의 배경색이 삭제되었습니다. 완전한 투명도를 얻었습니다.

Answer 1

div은 기본적으로 투명 할 필요는 없습니다. 부모의 배경을 상속받습니다. 어느 .. 대부분 흰색 가능성, 및 투명하지

시도 :

<div style="background-color: rgba(255, 0, 0, 0.5)">.........</div>