고득점 도와주세요! 사진을 만들어서 png형식으로 저장했는데 배경설정이 투명하게 됐는데 왜 홈페이지에 올렸는데 효과가 뭉개졌나요?

위 코드는 일부 IE Hacks, IE7, IE8을 사용하고 Firefox는 _Background를 직접 적용하고 IE6은 필터를 적용합니다!

------------------------------- -- ---------------

PNG 이미지의 투명 또는 반투명 특성을 사용하면 매우 아름다운 웹페이지가 제공될 예정입니다. Firefox와 Opera는 PNG를 매우 잘 지원하지만 IE는 PNG 이미지의 "존재"를 무시합니다. IE7에서는 이미 지원하지만 두 IE6에서는 여전히 지원하지 않습니다. 몇 가지 정보를 확인하고 기본적으로 이 문제를 해결했습니다.

IE6에서 PNG 투명 배경을 지원할 수 있는 JS 프로그램이 있지만 이를 구현하려면 CSS를 사용하는 것이 그리 편리하지 않습니다. 사용되는 것은:

IE5.5+의 AlphaImageLoader 필터

구문:

필터: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod =sSize , src=sURL )

속성:

활성화됨: 선택 사항. 부울. 필터가 활성화되어 있는지 여부를 설정하거나 검색합니다. true | false

true : 기본값입니다. 필터가 활성화되었습니다.

false : 필터가 비활성화됩니다.

크기 조정 방법: 선택 사항입니다. 끈. 필터링된 개체의 이미지가 개체 컨테이너의 경계 내에서 표시되는 방법을 설정하거나 검색합니다. 자르기 : 개체 크기에 맞게 이미지를 자릅니다.

이미지 : 기본값입니다. 그림의 크기에 맞게 개체의 크기 범위를 늘리거나 줄입니다.

scale : 개체의 크기 경계에 맞게 이미지 크기를 조정합니다.

소스: 필수입니다. 끈. 절대 또는 상대 URL 주소를 사용하여 배경 이미지를 지정합니다. 이 매개변수를 생략하면 필터가 적용되지 않습니다.

설명:

개체 컨테이너 범위 내 개체의 배경과 콘텐츠 사이에 이미지를 표시합니다. 그리고 이 이미지를 자르고 크기를 조정하는 작업을 제공합니다. PNG(Portable Network Graphics) 형식을 로드하는 경우 0%-100% 투명도도 제공됩니다.

PNG(Portable Network Graphics) 형식의 이미지 투명도 때문에 텍스트를 선택할 수 있습니다. 즉, 이미지의 완전히 투명한 영역 뒤에 있는 콘텐츠를 PNG(Portable Network Graphics) 형식으로 표시하도록 선택할 수 있습니다.

위 내용을 이해한 후 간단한 CSS 코드를 작성할 수 있습니다(아직 완전히 올바른 코드는 아님).

#div1 {

height: 600px < /p>

너비: 260px;

패딩:

배경 반복: 반복

필터: progid:DXImageTransform.Microsoft. (enabled=true, sizingMethod=scale, src="bj1.png"

}

이 간단한 CSS 코드는 IE에서 PNG 투명 배경을 정상적으로 표시할 수 있습니다. 그러나 다음을 알 수 있습니다. FF에서는 배경이 나타나지 않습니다. 이유 분석:

AlphaImageLoader 필터는 IE에서만 지원되며 FF는 이 필터를 지원하지 않습니다.

가끔 처음으로 작성할 때 시간 많은 사람들이 이렇게 할 것입니다:

코드에 다음과 같은 단락을 추가합니다: background-image: url(bj1.png);

그런 코드 조각을 추가하면 문제를 해결할 수 있지만 FF에서는 문제가 발생하지 않습니다. IE에는 또 다른 문제가 있습니다. 새 배경이 필터의 배경을 덮게 되어 필터 표시가 유효하지 않게 됩니다. 이때 IE와 FF 간의 CSS 읽기의 서로 다른 특성이 사용됩니다.

PNG 투명 이미지를 완벽하게 지원하는 Firefox, Opera 및 기타 브라우저도 하위 선택기(>)를 지원하지만 IE에서는 이를 인식하지 못하므로(IE7 포함) 이를 사용하여 PNG 이미지의 스타일을 정의할 수 있습니다. Firefox, Opera 및 기타 브라우저의 경우 코드는 다음과 같습니다. ：

html>body #div1 {

background-repeat:repeat;Background-image:url(bj1.png) );

}

동시에 IE에서만 인식되는 와일드카드 문자(*)를 통해 IE 브라우저에서 필터를 정의합니다. 코드는 다음과 같습니다.

* #div1 {필터: progid:DXImageTransform.Microsoft.AlphaImageLoader.(enabled=true, sizingMethod=scale, src="bj1.png")

}

그리고 #div1 {}은 IE 및 FF에 대한 일부 설정을 지정합니다*** 코드 파일 크기를 줄입니다.

최종 결과는 다음과 같습니다:

#div1 {

height: 600px;

width: 260px;

padding: 20px;< /p >

background-repeat: 반복;

}

/* for ie7 ff*/

html>body #div1 {

}

/* ie6의 경우 */

* #div1 {

배경:없음;

필터:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/menu1.png', sizingMethod='crop');

p>

}

AlphaImageLoader 필터로 인해 이 영역의 링크와 버튼이 무효화된다는 점에 유의해야 합니다. 해결 방법은 링크 또는 버튼에 position:relative; 상대적으로 만듭니다. AlphaImageLoader는 배경 반복을 설정할 수 없으므로 이미지 절단 정확도에 대한 정확도 요구 사항이 매우 높습니다.

------------------------------- -- ----------

웹 페이지에 png 이미지를 직접 삽입하여 투명하게 만들고 싶다면, 다음 js 코드를 추가하기만 하면 전체 페이지에 직접 삽입된 모든 PNG 이미지가 투명해질 수 있습니다.

------------------------- --- ---------------------

png를 사용하고 싶다면 배경을 투명하게 만들려면 CSS 필터와 해킹을 사용해야 합니다:

html>body .png { background:url(1.png); height:100px; 1px;}

/* ie6 */* html .png { 필터: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='1.png');

배경: 없음; 높이: 100px; 테두리:#000 단색 1px;}