So erzielen Sie einen durchscheinenden Effekt von Bildern in CSS

So erreichen Sie Bildtransluzenz mit CSS: Sie können sie über das Opazitätsattribut festlegen, z. B. [style="-moz-opacity:0.5";]. Das opacity-Attribut wird verwendet, um den Deckkraftgrad eines Elements festzulegen. Die Syntax lautet [opacity:value|inherit;].

Umgebung dieses Artikels:

• Windows10, CSS3

• Anwendbar für alle Computermarken

Attributeinführung:

Das Deckkraftattribut legt den Deckkraftgrad des Elements fest.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Syntax:

opacity: value|inherit;

Attributwert:

• Wert Gibt die Deckkraft an. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

• inherit Der Wert des Opazitätsattributs sollte vom übergeordneten Element geerbt werden.

Der Implementierungscode lautet wie folgt:

Dieser Effekt kann sowohl auf IE- als auch auf Mozilla-Browsern funktionieren. Der Code lautet wie folgt

<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">

Im IE müssen Sie „Filter“ verwenden, um Transparenz und „Deckkraft“ zu definieren. In Mozilla ist es jedoch möglich, dass „Deckkraft“ direkt analysiert wird. Wenn Sie also möchten, dass dieser Effekt in beiden Browsern unterstützt wird, müssen Sie beide Einstellungen hinzufügen.

Einstellungen für IE: this.filters.alpha.opacity=50; Einstellungen für Mozilla: this.style.MozOpacity=0.5.

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen durchscheinenden Effekt von Bildern in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!