Web-Frontend
js-Tutorial
Zusammenfassung der Lösungen, warum PNG unter IE6_javascript-Techniken nicht transparent sein kann
Zusammenfassung der Lösungen, warum PNG unter IE6_javascript-Techniken nicht transparent sein kann
FF und IE7 unterstützen bereits direkt transparente PNG-Bilder. Das Folgende wird hauptsächlich verwendet, um das Problem des grauen Hintergrunds in transparenten PNG-Bildern unter IE6 zu lösen
style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"
Syntax:
Filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=bEnabled, sizingMethod=sSize, src=sURL)
aktiviert: Optional. Boolescher Wert. Legt fest oder ruft ab, ob der Filter aktiv ist. true |. false true : Standardwert. Filter aktiviert.
false: Filter ist deaktiviert.
SizingMethod: Optional. Zeichenfolge. Legt fest oder ruft ab, wie das Bild des gefilterten Objekts innerhalb der Grenzen des Objektcontainers angezeigt wird. Zuschneiden: Schneidet das Bild so zu, dass es den Objektabmessungen entspricht.
Bild: Standardwert. Erhöhen oder verkleinern Sie die Größengrenzen des Objekts, um es an die Abmessungen des Bildes anzupassen.
Maßstab: Skalieren Sie das Bild so, dass es in die Größengrenzen des Objekts passt.
src: erforderlich. Zeichenfolge. Geben Sie das Hintergrundbild mit einer absoluten oder relativen URL-Adresse an. Wenn dieser Parameter weggelassen wird, hat der Filter keine Wirkung.
Eigenschaften:
Aktiviert: Lesbar und beschreibbar. Boolescher Wert. Siehe aktiviertes Attribut.
sizingMethod: Lesbar und beschreibbar. Zeichenfolge. Siehe die Eigenschaft „sizingMethod“.
src: lesbar und beschreibbar. Zeichenfolge. Siehe das src-Attribut.
Beschreibung:
Zeigt ein Bild zwischen dem Hintergrund und dem Inhalt des Objekts innerhalb der Grenzen des Objektcontainers an. Und stellen Sie Funktionen zum Ausschneiden und Ändern der Größe dieses Bildes bereit. Wenn das PNG-Format (Portable Network Graphics) geladen ist, wird auch eine Transparenz von 0 % bis 100 % bereitgestellt.
Die Transparenz von Bildern im PNG-Format (Portable Network Graphics) hindert Sie nicht daran, Text auszuwählen. Mit anderen Worten: Sie können den Inhalt hinter dem vollständig transparenten Bereich des Bildes im PNG-Format (Portable Network Graphics) anzeigen.
Beispiel: Lösen Sie das Problem des PNG-Transparenzfehlers unter IE6.
CSS-Stil:
.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-Code:
<div class="png"> <div> CSS 背景PNG透明 及 链接失效问题解决 </div> </div>
/*
Kompatibel mit IE6.0, IE7.0, FF,
IE7.0 und die neue Version von FF können es tatsächlich transparent machen, ohne einen Filter hinzuzufügen.
*/
============================================= === =============================
Methode 1: Definieren Sie einen Stil. Nachdem Sie diesen Stil auf ein bestimmtes Div angewendet haben, wird das transparente PNG-Hintergrundbild des Div automatisch transparent. (Beachten Sie, dass die Pfade der beiden Bilder unterschiedlich geschrieben sind. In diesem Beispiel befinden sich das Bild icon_home.png und die HTML-Datei im selben Verzeichnis)
<!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>
Methode 2: Definieren Sie den Stil für img, und alle transparenten PNGs auf der Seite werden automatisch transparent. (Diese Methode gilt nur für direkt eingefügte Bilder, nicht für Hintergrundbilder.) Beachten Sie, dass Sie ein kleines transparentes Bild transparent.gif vorbereiten müssen. Die Größe ist nicht begrenzt. Muss im selben Verzeichnis wie HTML
abgelegt werden
Bitte nicht in großen Mengen verwenden, sonst öffnet sich die Seite sehr langsam!!!)
<!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>
Methode 3: Verwenden Sie JS, um es zu implementieren. Nach dem Hinzufügen eines Teils des JS-Codes werden alle eingefügten transparenten PNGs automatisch transparent (Beachten Sie, dass diese Methode nur für direkt eingefügte Bilder gilt, nicht für Hintergrundbilder. )
<!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>
Methode 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>
Die Verwendung ist wie folgt:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So konvertieren Sie PNG in JPG unter Windows 11
May 12, 2023 pm 03:55 PM
So konvertieren Sie PNG in JPG unter Windows 11. Unter Windows 10 und 11 können Sie die integrierte Paint-App von Microsoft verwenden, um Bilddateien schnell zu konvertieren. Um ein PNG-Bild in JPG unter Windows 11 zu konvertieren, führen Sie die folgenden Schritte aus: Öffnen Sie den Datei-Explorer und navigieren Sie zu dem PNG-Bild, das Sie konvertieren möchten. Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie im Menü „Öffnen mit“ > „Zeichnen“. Ihr Foto oder Bild wird in der Paint-App geöffnet. Beachten Sie die Dateigröße am unteren Bildschirmrand. Um eine Datei von PNG in JPG zu konvertieren, klicken Sie auf Datei und wählen Sie im Menü Speichern unter > JPEG-Bild. Wenn die Dateiressource
So lösen Sie das Problem der schwarzen Linien in der transparenten Taskleiste von Win11
Dec 22, 2023 pm 10:04 PM
Nachdem viele Freunde translucenttb zum Einrichten einer transparenten Taskleiste verwendet hatten, stellten sie fest, dass es in der transparenten Taskleiste von Win11 eine schwarze Linie gab, die sehr unangenehm aussah. Wie sollte ich das Problem zu diesem Zeitpunkt tatsächlich lösen? . In der transparenten Taskleiste von Win11 befindet sich eine schwarze Linie: Methode 1: 1. Laut Benutzerfeedback können Sie mit der rechten Maustaste auf translucenttb klicken und die Einstellungen öffnen. 2. Setzen Sie dann den „Rand“ der Symboloption auf „1“, um das Problem zu lösen. Methode 2: 1. Wenn es immer noch nicht funktioniert, können Sie mit der rechten Maustaste auf die leere Stelle klicken, um „Personalisierung“ zu öffnen. 2. Wählen Sie dann das Standarddesign des Systems aus, um es zu ändern. Methode drei: 1. Wenn alles andere fehlschlägt, wird empfohlen, translucenttb zu deinstallieren. 2. Anschließend austauschen
Wie löst man das Problem einer Zeile in der Taskleistentransparenz in Win11?
Jan 29, 2024 pm 12:12 PM
Viele Win11-Benutzer stellen ihre Taskleiste beim Ausführen des Systems auf transparent ein, aber viele Benutzer sehen nach der Einrichtung eine schwarze Linie in der Taskleiste. Benutzer können zur Einrichtung Software von Drittanbietern verwenden. Lassen Sie diese Website den Benutzern die Lösung für das Problem einer transparenten Linie in der Win11-Taskleiste sorgfältig vorstellen. Lösung für das Problem einer transparenten Linie in der Win11-Taskleiste Methode 1: 1. Laut Benutzerfeedback können Sie mit der rechten Maustaste auf translucenttb klicken und die Einstellungen öffnen. 2. Setzen Sie dann den Rand der Symboloption auf 1, um das Problem zu lösen. 2. Wählen Sie dann das Standardthema des Systems aus und ändern Sie es, um das Problem zu lösen.
So legen Sie Transparenz in CSS fest
Nov 01, 2023 am 10:00 AM
Zu den CSS-Methoden zum Festlegen der Transparenz gehören das Opazitätsattribut, der RGBA-Farbwert, das Hintergrundfarbenattribut, die Verwendung von Pseudoelementen usw. Detaillierte Einführung: 1. Das Deckkraftattribut: Durch Festlegen des Deckkraftattributs des Elements wird ein transparenter Effekt erzielt. Der Wertebereich dieses Attributs liegt zwischen 0 und 1. 0 bedeutet vollständig transparent, 1 bedeutet vollständig undurchsichtig. 2. RGB-Farbwert. durch Festlegen der Deckkraft des Elements. Die Hintergrundfarbe oder Textfarbe ist ein RGBA-Farbwert, um einen transparenten Effekt zu erzielen. Der RGBA-Farbwert besteht aus Rot, Grün, Blau, Transparenz usw.
Grafisches Tutorial zum Transparentmachen der Win7-Taskleiste
Jul 20, 2023 am 09:49 AM
Heute fragte eine Gruppe von Benutzern, warum ihre Computer nach der Neuinstallation von Windows 7 keinen Transparenzeffekt hatten. Tatsächlich wird dies dadurch verursacht, dass Ihr Computer den Grafikkartentreiber nicht rechtzeitig aktualisiert und das Windows 7 Aero-Design nicht anpasst. Sie können es auf folgende Weise einrichten. 1. Zuerst müssen Sie sicherstellen, dass auf Ihrem Computer ein neuer Grafikkartentreiber installiert ist. Sie können den Treiberassistenten oder 360 Driver Master verwenden, um den Grafikkartentreiber online zu aktualisieren. . 2. Klicken Sie mit der rechten Maustaste auf eine leere Stelle auf dem Desktop, wählen Sie „Personalisieren“ und öffnen Sie. 3. Suchen Sie hier nach dem Aero-Thema und wählen Sie es aus. Unter normalen Umständen sollten Sie den transparenten Glaseffekt sehen können. Verstehen Sie das Tutorial, wie Sie Ihre Win7-Taskleiste transparent machen? Schüler, die nicht wissen, wie es geht, machen es bitte schnell.
Wie stelle ich die Terminaltransparenz im Linux-System ein?
Jan 07, 2024 am 10:21 AM
Wenn Linux Befehle im Terminal ausführt, können Sie die Terminaltransparenz festlegen, um die Anzeige anderer Hilfedokumente wie PDFs, Webseiten usw. zu erschweren. Werfen wir einen Blick auf das ausführliche Tutorial unten. . 1. Fenster-Spezialeffekte aktivieren 1. Um die Transparenz des Terminals einzustellen, müssen Sie zunächst die Fenster-Spezialeffekte aktivieren. Klicken Sie zunächst in der Taskleiste auf „Kontrollzentrum“. 2. Klicken Sie im Kontrollzentrum auf „Anzeige“. 3. Stellen Sie sicher, dass unter „Anzeige“ die Schaltfläche „Fenstereffekte aktivieren“ aktiviert ist. 4. Darüber hinaus können Sie auch die Tastenkombinationen Umschalt+Win+Tab verwenden, um Fenstereffekte schnell zu öffnen oder zu schließen. 2. Transparenz einstellen
So benennen Sie die Erweiterung aller Dateien in einem Ordner um, einschließlich Unterordnern
Apr 14, 2023 pm 12:22 PM
Angenommen, Sie müssen die Erweiterung einer Datei von einer Erweiterung in eine andere umbenennen, beispielsweise von jpg in png. Es ist natürlich ganz einfach! Was aber, wenn Sie mehrere Dateien haben, deren Erweiterungen geändert werden müssen? Oder noch schlimmer: Was wäre, wenn sich diese mehreren Dateien auch in mehreren Ordnern und Unterordnern innerhalb eines einzigen Ordners befinden? Nun, für einen normalen Menschen kann das ein Albtraum sein. Aber für einen Geek absolut nicht. Die Frage ist nun: Bist du ein Geek? Nun, mit Hilfe von Geek Page ist das definitiv der Fall! In diesem Artikel erklären wir, wie Sie die Erweiterung aller Dateien in einem Ordner, einschließlich der Unterordner Ihrer Wahl, mithilfe einer Batch-Skript-Methode einfach von einer Erweiterung in eine andere umbenennen können. Beachten:
Schritt-für-Schritt-Anleitung zum Festlegen der Taskleistentransparenz in Windows 10
Jul 11, 2023 pm 11:37 PM
Zufällig sah ich, dass die Win10-Taskleiste einer anderen Person transparent war, und sie sah sehr schön aus. Als ich zurückkam, wollte ich auch meinen eigenen Win10-Computer so einstellen, dass er transparent ist. Unter normalen Umständen hat die Standard-Taskleiste keinen transparenten Hintergrund und Sie müssen die Einstellungen anpassen. Als nächstes erklärt der Editor im Detail, wie Sie die Win10-Taskleiste in einer Minute vollständig transparent machen. 1. Öffnen Sie zunächst das Win10-System, klicken Sie dann mit der rechten Maustaste auf den Desktop und suchen Sie im Kontextmenü nach „Personalisierung“. 2. Wählen Sie dann im Fenster „Personalisierung“ im linken Menü „Farbe“ aus und klicken Sie auf offen. 3. Suchen Sie dann im Menü rechts nach „Transparenzeffekt“, wählen Sie „Ein“ und aktivieren Sie „Startmenü, Taskleiste und Aktionscenter“ und „Titelleiste“. 4. Kehren Sie dann zu w zurück
