Heim > Artikel > Web-Frontend > So legen Sie Transparenz in CSS-Stilen fest
So legen Sie Transparenz in CSS-Stilen fest
- 清浅Original
- 2018-12-06 11:11:576178Durchsuche
So legen Sie die Transparenz im CSS-Stil fest: Erstellen Sie zuerst eine HTML-Beispieldatei. Erstellen Sie dann ein Bild über img. Legen Sie schließlich die Transparenz über das Opazitätsattribut in CSS fest, z. B. mit der Syntax „opacity: value|inherit;“ ".
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.
In CSS können wir die Transparenz eines Elements ändern, indem wir ihm das Opazitätsattribut hinzufügen. Je kleiner der Wert, desto transparenter ist es Wir verwenden häufig CSS auf der Seite. Verwenden Sie heute einen der Stile, um die Transparenz festzulegen und die Seite zu verschönern. Ich hoffe, dass es für alle hilfreich ist 🎜>
Deckkraftattribut
opacity: value|inherit;Wert: wird zum Festlegen der Deckkraft verwendet. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig)
erben: Der Wert des Opazitätsattributs sollte vom übergeordneten Element geerbt werden
Beispiel: 
<body> 未设置透明度： <img src="images/5.jpg" style="max-width:90%" alt="So legen Sie Transparenz in CSS-Stilen fest" > 设置了透明度： <img src="images/5.jpg" style="max-width:90%" alt="So legen Sie Transparenz in CSS-Stilen fest" > </body>Der Effekt ist wie folgt:
Hinweis:
Verwenden Sie das Attribut opacity, um die Transparenz in den Browsern IE9, Firefox, Chrome und Opera festzulegen. Die Opazitätseigenschaft kann auf Werte von 0,0 bis 1,0 eingestellt werden. Je kleiner der Wert, desto transparenter ist er.
IE8 und frühere Versionen verwenden den Filter filter:alpha(opacity=x), x kann Werte von 0 bis 100 annehmen. Je kleiner der Wert, desto transparenter ist er.[Empfohlene Kurse:
CSS-Kurs]Case Sharing
Verwenden Sie das Opazitätsattribut, um einen drohenden Abwärtspfeil zu erstellen
In diesem Fall müssen Sie das Animationsanimationsattribut in CSS3 verwenden, um die Animation anzugeben, indem Sie den Wert festlegen Animationsattribut. Die Ausführungszeit und das Design der Transparenz ändern sich während des Animationsprozesses
<style>
.box
{ -webkit-animation:box 5s infinite;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes box
{
from
{
opacity: 0;
}
to
{
opacity: 1;
}
}
</style>
</head>
<body>
<div class="box">
<img src="images/jiantou.png" alt="So legen Sie Transparenz in CSS-Stilen fest" >
</div>
</body>Die Darstellungen sind wie folgt:
Zusammenfassung: Das Obige ist das Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich sein wird. 
Das obige ist der detaillierte Inhalt vonSo legen Sie Transparenz in CSS-Stilen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!