아직 투명한 배경과 불투명한 텍스트의 불투명도가 걱정된다면 한 번 살펴보시길 권해드립니다. 물론 IE6을 포기했기 때문에 IE6에서는 PNG8 사진을 사용해도 아무런 효과가 없을 것이라고는 말하지 않습니다. 물론 필터를 사용할 수도 있습니다. 필터 사용을 권장하지 않습니다. 다른 문제가 발생할 수 있기 때문입니다! (클릭이 안되는 현상 등) 프론트엔드 작업을 할 때 가장 두려운 것은 버그, 특히 IE6 입니다. IE6에서 나가세요!
이 글의 핵심은 PNG32 투명 사진을 배경으로 사용한 후 배경을 타일링하는 것입니다. 이렇게 하면 배경 투명 텍스트가 없고 텍스트가 투명해집니다. 정말 쉽죠? 그렇지 않나요?
이미지의 투명도만 조정하면 됩니다.
PSD에서 이미지 투명도를 20%로 설정하고 png로 저장하세요.
(하지 마세요: 모드를 회색조로 설정하지 마세요. png8이 됩니다. 그리고 투명도가 없습니다.)
배경은 투명하고 텍스트는 불투명합니다. 하하. IE 6은 사라졌습니다! 지원: IE7.0 /FF3.0 /Opera10 /Chrome/Safari. 모든 테스트가 통과되었습니다.
렌더링은 다음과 같습니다.
전체 코드는 다음과 같습니다.