원래는 그냥 png 투명 그림이었는데, IE에서는 쉽게 풀 수 있었습니다. 저도 js 방식, 필터 CSS 방식 등 여러 방법을 시도해 봤는데 전체적으로 완벽하지 않다는 생각이 들어서, 동시에 스프라이트 방법은 그렇게 간단하고 쉽지 않습니다.
마지막으로 CSS 파일에 포함하기 위해 htc 방법을 사용하면 기본적으로 대부분의 투명성 문제를 한 번에 해결할 수 있다는 것을 알았습니다.
이 방법을 많은 사람들이 소개했지만, 페이지가 영어로 되어 있어서 번역한 사람도 거의 없고, 사용하는 사람도 거의 없을 것입니다.
이 방법은 아래에 자세히 소개되어 있습니다.
이 방법 자체의 데모 주소: http://www.twinhelix.com/css/iepngfix/demo/
(말씀드렸듯이 다 영어로 되어 있으니 걱정하지 마세요)
다음을 통해 해결할 수 있습니다.
1. "img" 태그를 사용하여 png 투명 이미지를 페이지에 추가합니다.
2. 배경을 사용하여 CSS에 png 투명 배경을 추가합니다(여러 버전 지원)
3. 배경 png의 일부 버전은 투명하므로 현재 페이지에 js를 추가하여 해결해야 합니다.
파일 패키지 다운로드: http://www.twinhelix.com/css/iepngfix/iepngfix.zip
1. 다운로드하고 압축을 풀면 많은 파일이 있을 것입니다. 그 중 우리가 사용해야 하는 파일은 3개입니다:
iepngfix.htc, 공백.gif, iepngfix_tilebg.js
2. 각각 해당 css, js 및 이미지 디렉터리로 전송할 수 있습니다. 물론 iepng라는 폴더와 같은 새 폴더를 만들어 전송할 수도 있습니다.
3. 코드의 첫 번째 문장을 추가합니다. html 파일에 추가된 형식입니다. 오류가 걱정된다면 루트 디렉터리에 대한 상대 경로를 직접 사용하세요. /iepng/iepngfix.htc입니다. 이는 일반적으로 작동하지 않습니다. 물론 동작을 추가할 수도 있습니다: url(iepngfix.htc) 파일.
| <스타일 유형="텍스트/css"> img, div { 동작: url(iepngfix.htc) } </style> |
4. 메모장이나 유사한 도구를 사용하여 iepngfix.htc 파일을 열고 실제 상황에 따라 BlankImg의 파일 경로를 /iepng/blank.gif와 같은 사용자 고유의 경로로 바꿉니다.
| IEPNGFix.blankImg = '/images/blank.gif'; |
5. 필수 페이지의 "head"에 다음 js 호출 코드를 추가합니다. (이 단계는 필요하지 않습니다. head 부분의 include가 균일하게 호출되는 경우 이 문장을 추가하는 것이 좋습니다.)
| <script type="text/javascript" src="iepngfix_tilebg.js"></script> |
위 단계를 수행하면 기본적으로 IE에서 png의 투명 효과를 얻을 수 있습니다.
적어도 지금은 아무런 문제도 발견하지 못했습니다. 문제가 있으면 언제든지 함께 논의해 주세요. 감사합니다.
원래 주소: http://blog.sina.com.cn/s/blog_62a8de7a0100ksh2.html
기여해 주신 Lang Xin 에게 감사드립니다.