IE6_javascript 기술에서 png가 투명할 수 없는 이유에 대한 솔루션 요약-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

IE6_javascript 기술에서 png가 투명할 수 없는 이유에 대한 솔루션 요약

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

ie6 png 투명한

FF와 IE7은 이미 투명 PNG 이미지를 직접 지원합니다. 다음 은 주로 IE6

에서 투명 PNG 이미지의 회색 배경 문제를 해결하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"

구문:
필터: progid:DXImageTransform.Microsoft.AlphaImageLoader( 활성화=bEnabled , sizingMethod=sSize , src=sURL )

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

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

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

특징:
활성화됨: 읽기 및 쓰기가 가능합니다. 부울. 활성화된 속성을 참조하세요.
sizingMethod: 읽기 및 쓰기가 가능합니다. 끈. sizingMethod 속성을 참조하세요.
src: 읽기 및 쓰기가 가능합니다. 끈. src 속성을 참조하세요.

설명:
개체 컨테이너 범위 내에서 개체의 배경과 내용 사이에 이미지를 표시합니다. 그리고 이 이미지를 자르고 크기를 조정하는 작업을 제공합니다. PNG(Portable Network Graphics) 형식을 로드하는 경우 0%-100% 투명도도 제공됩니다.
PNG(Portable Network Graphics) 형식의 이미지 투명도는 텍스트 선택을 방해하지 않습니다. 즉, 이미지의 완전히 투명한 영역 뒤에 있는 콘텐츠를 PNG(Portable Network Graphics) 형식으로 표시하도록 선택할 수 있습니다.

예: IE6에서 png 투명도 오류 문제를 해결합니다.

CSS 스타일:

.png{
_background: url(images/angel.png) no-repeat !important; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/angel.png");
background:none;
width:118px;height:133px;
}

.png div{position:relative;}

로그인 후 복사

HTML 코드:

<div class="png">
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>

로그인 후 복사

/*
IE6.0, IE7.0, FF,
와 호환 가능 IE7.0과 FF의 새 버전은 실제로 필터를 추가하지 않고도 투명하게 만들 수 있습니다.
*/

============================================= === ==============================

방법 1: 스타일을 정의합니다. 이 스타일을 특정 div에 적용하면 해당 div의 투명한 png 배경 이미지가 자동으로 투명해집니다. (두 이미지의 경로가 다르게 작성되어 있으니 참고하세요. 이 예시에서는 icon_home.png 이미지와 html 파일이 같은 디렉터리에 있습니다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
-->
</style>
</head>

<body>

<div class="qq"></div>

</body>
</html>

로그인 후 복사

방법 2: img 스타일을 정의하면 페이지의 모든 투명 PNG가 자동으로 투명해집니다. (이 방법은 직접 삽입한 사진에만 유효하며 배경 사진에는 적용되지 않습니다.) 참고로 작은 투명 사진(transparent.gif)을 준비해야 하며 크기에는 제한이 없습니다. html
과 같은 디렉토리에 위치해야 합니다. 대량으로 사용하지 마십시오. 그렇지 않으면 페이지가 매우 느리게 열립니다!!!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet&#63;this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1&#63;(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg&#63; this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);
}

</style>
</head>

<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
</div>
</body>
</html>

로그인 후 복사

방법 3: JS를 사용하여 구현합니다. js 코드를 추가하면 삽입된 모든 투명 png가 자동으로 투명해집니다. (이 방법은 직접 삽입된 이미지에만 유효합니다. 배경 이미지입니다. )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript"> 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
{ 
  var arVersion = navigator.appVersion.split("MSIE") 
  var version = parseFloat(arVersion[1]) 
  if ((version >= 5.5) && (document.body.filters)) 
  { 
    for(var j=0; j<document.images.length; j++) 
    { 
     var img = document.images[j] 
     var imgName = img.src.toUpperCase() 
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
     { 
       var imgID = (img.id) &#63; "id='" + img.id + "' " : "" 
       var imgClass = (img.className) &#63; "class='" + img.className + "' " : "" 
       var imgTitle = (img.title) &#63; "title='" + img.title + "' " : "title='" + img.alt + "' " 
       var imgStyle = "display:inline-block;" + img.style.cssText 
       if (img.align == "left") imgStyle = "float:left;" + imgStyle 
       if (img.align == "right") imgStyle = "float:right;" + imgStyle 
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
       var strNewHTML = "<span " + imgID + imgClass + imgTitle 
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
       img.outerHTML = strNewHTML 
       j = j-1 
     } 
    } 
  }   
} 
window.attachEvent("onload", correctPNG); 
</script>
<style type="text/css">
<!--
body {

}
-->
</style></head>

<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>

로그인 후 복사

방법 4

<script language="javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
   var imgID = (myImage.id) &#63; "id='" + myImage.id + "' " : "";
   var imgClass = (myImage.className) &#63; "class='" + myImage.className + "' " : "";
   var imgTitle = (myImage.title) &#63; "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
   var imgStyle = "display:inline-block;" + myImage.style.cssText;
   var strNewHTML = "<span " + imgID + imgClass + imgTitle

  + " style=\"" + "width:" + myImage.width

  + "px; height:" + myImage.height

  + "px;" + imgStyle + ";"

  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
   myImage.outerHTML = strNewHTML;
} } 

window.onload=function(){
     document.getElementById("top").style.height=screen.height/5+"px";
    
}//
</script>

로그인 후 복사

사용법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7364

자바 튜토리얼

1628

Cakephp 튜토리얼

1353

라라벨 튜토리얼

1266

PHP 튜토리얼

1214

Related knowledge

Windows 11에서 PNG를 JPG로 변환하는 방법 May 12, 2023 pm 03:55 PM

Windows 11에서 PNG를 JPG로 변환하는 방법 Windows 10 및 11에서는 Microsoft의 내장 그림판 앱을 사용하여 이미지 파일을 빠르게 변환할 수 있습니다. Windows 11에서 PNG 이미지를 JPG로 변환하려면 다음 단계를 따르십시오. 파일 탐색기를 열고 변환하려는 PNG 이미지로 이동합니다. 이미지를 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 연결 프로그램 > 그리기를 선택합니다. 사진이나 이미지가 그림판 앱에서 열립니다. 화면 하단의 파일 크기를 확인하세요. 파일을 PNG에서 JPG로 변환하려면 파일을 클릭하고 메뉴에서 다른 이름으로 저장 > JPEG 이미지를 선택합니다. 파일 리소스가

win11 투명 작업 표시줄의 검은 선 문제를 해결하는 방법 Dec 22, 2023 pm 10:04 PM

translucenttb를 사용하여 투명한 작업 표시줄을 설정한 후, 많은 친구들이 win11 투명 작업 표시줄에 검은색 선이 있다는 것을 발견했는데, 이는 매우 불편해 보였습니다. 실제로 이 문제는 소프트웨어에서 해결될 수 있습니다. win11 투명 작업 표시줄에 검은색 선이 있습니다. 방법 1: 1. 사용자 피드백에 따라 translucenttb를 마우스 오른쪽 버튼으로 클릭하고 설정을 열 수 있습니다. 2. 그런 다음 아이콘 옵션의 "여백"을 "1"로 설정하여 문제를 해결합니다. 방법 2: 1. 그래도 작동하지 않으면 빈 공간을 마우스 오른쪽 버튼으로 클릭하여 "개인 설정"을 엽니다. 2. 그런 다음 시스템 기본 테마를 선택하여 변경합니다. 방법 3: 1. 모든 방법이 실패하면 translucenttb를 제거하는 것이 좋습니다. 2. 그런 다음 교체

Win11에서 작업 표시줄 투명도에 줄이 생기는 문제를 해결하는 방법은 무엇입니까? Jan 29, 2024 pm 12:12 PM

많은 Win11 사용자는 시스템을 실행할 때 작업 표시줄을 투명하게 설정하지만, 많은 사용자는 설정 후 작업 표시줄에 검은색 선이 나타나는 것을 보게 됩니다. 사용자는 타사 소프트웨어를 사용하여 설정할 수 있습니다. 이 웹사이트에서는 win11 작업 표시줄에 선이 투명하게 나타나는 문제에 대한 해결책을 사용자에게 주의 깊게 소개합니다. win11 작업 표시줄의 투명한 선 문제 해결 방법 1: 1. 사용자 피드백에 따라 translucenttb를 마우스 오른쪽 버튼으로 클릭하고 설정을 열 수 있습니다. 2. 그런 다음 아이콘 옵션의 여백을 1로 설정하여 문제를 해결합니다. 2. 그런 다음 시스템 기본 테마를 선택하고 변경하여 문제를 해결합니다.

CSS에서 투명도를 설정하는 방법 Nov 01, 2023 am 10:00 AM

투명도를 설정하는 CSS 방법에는 불투명도 속성, rgba 색상 값, 배경색 속성, 의사 요소 사용 등이 포함됩니다. 자세한 소개: 1. 불투명도 속성은 투명한 효과를 얻기 위해 요소의 불투명도 속성을 설정하여 이 속성의 값 범위는 0~1입니다. 0은 완전히 투명함을 의미하고 1은 완전히 불투명함을 의미합니다. 2. RGB 색상 값, 요소의 불투명도를 설정하여 배경색이나 텍스트 색상은 투명한 효과를 얻기 위한 rgba 색상 값입니다. rgba 색상 값은 빨간색, 녹색, 파란색, 투명도 등으로 구성됩니다.

win7 작업 표시줄을 투명하게 만드는 방법에 대한 그래픽 튜토리얼 Jul 20, 2023 am 09:49 AM

오늘 한 그룹의 사용자가 Windows 7을 다시 설치한 후 컴퓨터에 투명도 효과가 없는 이유를 물었습니다. 실제로 이는 컴퓨터가 그래픽 카드 드라이버를 제때에 업데이트하지 않고 Windows 7 Aero 테마를 조정하지 않기 때문에 발생합니다. 다음과 같은 방법으로 설정할 수 있습니다. 1. 먼저 컴퓨터에 새 그래픽 카드 드라이버가 설치되어 있는지 확인해야 합니다. 드라이버 마법사 또는 360 드라이버 마스터를 사용하여 그래픽 카드 드라이버를 온라인으로 업데이트할 수 있습니다. . 2. 바탕 화면의 빈 공간을 바라보고 마우스 오른쪽 버튼을 클릭한 후 개인 설정을 선택하고 엽니다. 3. 여기에서 Aero 테마를 찾아 선택하세요. 정상적인 상황에서는 투명한 유리 효과를 볼 수 있습니다. win7 작업 표시줄을 투명하게 만드는 방법에 대한 튜토리얼을 이해하셨나요? 어떻게 해야할지 모르는 학생들은 빨리 해보세요.

Linux 시스템에서 터미널 투명성을 설정하는 방법은 무엇입니까? Jan 07, 2024 am 10:21 AM

Linux가 터미널에서 명령을 실행할 때 PDF, 웹 페이지 등과 같은 다른 도움말 문서를 보기 어렵게 만들기 위해 터미널 투명도를 설정하는 방법은 무엇입니까? 아래의 자세한 튜토리얼을 살펴보겠습니다. . 1. 창 특수 효과 켜기 1. 터미널의 투명도를 설정하려면 먼저 창 특수 효과를 켜야 합니다. 먼저 작업 표시줄에서 "제어 센터"를 클릭하세요. 2. 제어 센터에서 "디스플레이"를 클릭하세요. 3. "디스플레이"에서 "창 효과 켜기" 버튼이 켜져 있는지 확인하세요. 4. 또한 단축키 Shift+Win+Tab을 사용하여 창 효과를 빠르게 열거나 닫을 수도 있습니다. 2. 투명도 설정

하위 폴더를 포함하여 폴더 내 모든 파일의 확장명을 바꾸는 방법 Apr 14, 2023 pm 12:22 PM

파일 확장자의 이름을 한 확장자에서 다른 확장자로 바꿔야 한다고 가정합니다(예: jpg에서 png로). 물론 쉽습니다! 하지만 확장자를 변경해야 하는 파일이 여러 개 있다면 어떻게 될까요? 아니면 이러한 여러 파일이 단일 폴더 내의 여러 폴더와 하위 폴더에도 있는 경우에는 어떻게 될까요? 글쎄요, 보통 사람에게는 이것은 악몽이 될 수 있습니다. 그러나 괴짜에게는 절대 그렇지 않습니다. 이제 질문은 당신이 괴짜입니까? 글쎄, Geek Page의 도움으로 당신은 확실히 그렇습니다! 이 문서에서는 배치 스크립트 방법을 통해 선택한 하위 폴더를 포함하여 폴더 내 모든 파일의 확장명을 한 확장자에서 다른 확장자로 쉽게 바꾸는 방법을 설명합니다. 알아채다:

Windows 10에서 작업 표시줄 투명도를 설정하는 방법에 대한 단계별 자습서 Jul 11, 2023 pm 11:37 PM

우연히 다른 사람의 win10 작업 표시줄이 투명한 것을 봤는데 너무 아름다워서 돌아와서 나도 win10 컴퓨터를 투명하게 설정하고 싶었습니다. 일반적인 상황에서는 기본 작업 표시줄에 배경이 투명하지 않으므로 설정을 조정해야 합니다.다음으로 편집기에서 Win10 작업 표시줄을 1분 안에 완전히 투명하게 만드는 방법을 자세히 설명합니다. 1. 먼저 win10 시스템을 열고 바탕 화면을 마우스 오른쪽 버튼으로 클릭한 후 오른쪽 클릭 메뉴에서 "개인 설정"을 찾습니다. 2. 그런 다음 "개인 설정" 창의 왼쪽 메뉴에서 "색상"을 선택하고 클릭합니다. 열려 있는. 3. 그런 다음 오른쪽 메뉴에서 "투명도 효과"를 찾아 "켜기"를 선택하고 "시작 메뉴, 작업 표시줄 및 알림 센터"와 "제목 표시줄"을 확인합니다. 4. 그런 다음 w로 돌아갑니다.

See all articles

IE6_javascript 기술에서 png가 투명할 수 없는 이유에 대한 솔루션 요약

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제