Ändern Alpha für ein Bild schweben in CSS2-Standard?

Question

Ich versuche, Alpha-Effekt für mein Bild hinzuzufügen. Das Bild wird in abgerundeter Ecke rechteckiger Form. Ich weiß, es Attribute ist die Alpha in CSS3 zu ändern, aber ich versuche, mit dem W3C-Standard kompatibel zu sein, die noch CSS2 ist.

Leider i angegeben habe, meine Frage nicht richtig ealier. ich versuche, die Alpha zu ändern, wenn ich auf dem Bild schweben mit CSS2. Ich denke, das "background-image" für 100% Alpha zu verwenden, und den img-Tag für das 50% alpha verwenden. Gibt es einen besseren Weg, dies zu tun?

Answer 1

Wenn das Bild ein PNG , können Sie umfassen alpha direkt im Bild. Natürlich wäre dies der PNG Skript für IE6 Fix.

Sie können CSS verwenden, um die Transparenz zu setzen.

Edit: Aktualisiert nur Arbeit auf schweben, beachten Sie, dass dies in IE6 nicht funktionieren

.

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

Answer 2

Die typische Art und Weise ein Web-Entwickler, die transparenten Effekte implementiert wird unter Verwendung einer teilweise transparenten PNG-Datei als Hintergrund.

div {
  background: #FFF url(img/bg.png) repeat top left;
}

die png Verwendung funktioniert wie Sie es erwarten würden, aber Opazität nicht wie erwartet funktionieren:

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

Dies wird DIV 50% transparent machen, einschließlich aller seiner Kinder, Text und alle. Sie werden wirklich mit den Opazitätseinstellungen müssen spielen, um sicherzustellen, dass Sie Ergebnisse erhalten, wie man erwarten würde.

Answer 3

Eine noch einfachere Lösung, wenn Sie eine etwas schlechte Benutzererfahrung für IE6 stehen können, ist ein Alpha-transparentes Bild für alle modernen Browser zu verwenden, und ein Bild ohne Transparenz (oder nur eine einfarbige) zu IE6 senden. Sieht ein wenig schlechter für die wenigen Nutzer, ist aber viel weniger Code zu erhalten.