IE6_javascript テクニックで png を透明にできない理由の解決策の概要
FF と IE7 はすでに透明 PNG 画像を直接サポートしています。次の は主に、IE6 での透明 PNG 画像の灰色の背景の問題を解決するために使用されます。
style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"
構文:
フィルター: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled、sizingMethod=sSize、src=sURL)
有効: オプション。ブール値。フィルターがアクティブかどうかを設定または取得します。 true | false true : デフォルト値。フィルターが有効になりました。
false : フィルターは無効になります。
sizingMethod : オプション。弦。フィルタリングされたオブジェクトの画像がオブジェクト コンテナの境界内にどのように表示されるかを設定または取得します。 Crop : オブジェクトの寸法に合わせて画像をトリミングします。
画像: デフォルト値。画像の寸法に合わせてオブジェクトのサイズ境界を増減します。
scale : オブジェクトのサイズ境界内に収まるように画像を拡大縮小します。
ソース: 必須。弦。絶対または相対 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 背景画像が自動的に透明になります。 (2 つの画像のパスの書き方が異なることに注意してください。この例では、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?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? 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) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "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) ? "id='" + myImage.id + "' " : "";
var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
var imgTitle = (myImage.title) ? "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>
使用方法は次のとおりです:
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7364
15
1628
14
1353
52
1265
25
1214
29
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 ユーザーはシステムの実行時にタスク バーを透明に設定しますが、多くのユーザーは設定後にタスク バーに黒い線が表示されます。ユーザーはサードパーティ製ソフトウェアを使用してセットアップできます。この Web サイトでは、win11 のタスクバーに透明な線が表示される問題の解決策をユーザーに丁寧に紹介します。 win11 タスクバーに透明な線が表示される問題の解決策 方法 1: 1. ユーザーのフィードバックによると、translucenttb を右クリックして設定を開くことができます。 2. 次に、アイコン オプションのマージンを 1 に設定して、問題を解決します。 2. 次に、システムのデフォルトのテーマを選択し、問題を解決するために変更します。
CSSで透明度を設定する方法
Nov 01, 2023 am 10:00 AM
透明度を設定するための CSS メソッドには、opacity 属性、rgba カラー値、background-color 属性、疑似要素の使用などがあります。詳細な紹介: 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 や Web ページなどの他のヘルプドキュメントを見えにくくするために、ターミナルの透明度を設定できます。以下の詳細なチュートリアルを見てみましょう。 。 1. ウィンドウの特殊効果をオンにする 1. 端末の透明度を設定するには、まずタスクバーの「コントロールセンター」をクリックして、ウィンドウの特殊効果をオンにする必要があります。 2. コントロールセンターの「ディスプレイ」をクリックします。 3. 「ディスプレイ」で「ウィンドウ効果をオンにする」ボタンがオンになっていることを確認します。 4. さらに、ショートカット キー Shift+Win+Tab を使用して、ウィンドウ効果をすばやく開閉することもできます。 2.透明度を設定する
サブフォルダーを含むフォルダー内のすべてのファイルの拡張子の名前を変更する方法
Apr 14, 2023 pm 12:22 PM
ファイルの拡張子の名前をある拡張子から別の拡張子に変更する必要があるとします。たとえば、jpg から png に変更します。もちろん簡単です！しかし、拡張子を変更する必要があるファイルが複数ある場合はどうすればよいでしょうか?さらに悪いことに、これらの複数のファイルが 1 つのフォルダー内の複数のフォルダーおよびサブフォルダーにも配置されている場合はどうなるでしょうか。まあ、普通の人にとって、これは悪夢かもしれません。しかし、オタクにとっては、絶対にそうではありません。ここでの質問は、あなたはオタクですか? Geek Page の助けがあれば、間違いなくそうなります!この記事では、バッチ スクリプトを使用して、選択したサブフォルダーを含むフォルダー内のすべてのファイルの拡張子の名前を、ある拡張子から別の拡張子に簡単に変更する方法について説明します。知らせ：
Windows 10 でタスクバーの透明度を設定する方法に関するステップバイステップのチュートリアル
Jul 11, 2023 pm 11:37 PM
たまたま他の人のwin10のタスクバーが透明になっているのを見てとても綺麗だったので、帰ってきたら自分のwin10のパソコンも透明に設定したいと思いました。通常の状況では、デフォルトのタスク バーの背景は透明ではないので、設定を調整する必要があります。次に、Win10 のタスク バーを完全に透明にする方法をエディターが 1 分で詳しく説明します。ぜひご覧ください。 1. まず、win10 システムを開き、デスクトップ上で右クリックし、右クリック メニューで [個人用設定] を見つけます 2. 次に、[個人用設定] ウィンドウの左側のメニューで [色] を選択し、クリックします開ける。 3. 次に、右側のメニューで「透明効果」を見つけて「オン」を選択し、「スタートメニュー、タスクバー、アクションセンター」と「タイトルバー」にチェックを入れます。 4.その後、wに戻ります
