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:576108Durchsuche

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: So legen Sie Transparenz in CSS-Stilen fest

Stellen Sie das Bild auf undurchsichtig

<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:

So legen Sie Transparenz in CSS-Stilen fest 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. So legen Sie Transparenz in CSS-Stilen fest

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!

html5 firefox css chrome css3 html Filter 继承 animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Funktion calc() in CSSNächster Artikel：So verwenden Sie die Funktion calc() in CSS

In Verbindung stehende Artikel

Mehr sehen