Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So legen Sie die Farbtransparenz in CSS fest

王林
Freigeben: 2023-01-06 11:14:15
Original
12369 Leute haben es durchsucht

Die Möglichkeit, die Farbtransparenz in CSS festzulegen, besteht darin, dem angegebenen Element das Opazitätsattribut hinzuzufügen und die entsprechende Opazität festzulegen, z. B. [opacity:0.5;], was bedeutet, dass das Element auf halbtransparent gesetzt wird.

So legen Sie die Farbtransparenz in CSS fest

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Das Opazitätsattribut kann verwendet werden, um die Transparenz des Hintergrunds des Elements festzulegen. Es erfordert einen Wert zwischen 0 und 1.

0 bedeutet vollständig transparent (Deckkraft: 0);

1 bedeutet vollständig undurchsichtig (Deckkraft: 1);

Syntax:

rrree

Attributwert:


    Wert gibt die Deckkraft an. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig)
  • inherit Der Wert des Opacity-Attributs sollte vom übergeordneten Element geerbt werden
  • Codebeispiel:
opacity: value|inherit;
Nach dem Login kopieren
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>opactity</title>
    <style>
    .box1{
                position:relative;
        width:200px;height:200px;
        background-color: #00f;
    }
         .box2{
              position:absolute;
              top:80px;
              left:80px;
              width:200px;
              height:200px;
              background-color:#0f0;
       }
       .box3{
             position:relative;
              width:200px;
              height:200px;
              background-color:#f00;
              z-index:1;
}
</style>
</head>
<body>
    <div></div>
       <div></div>
       <div></div>
</body>
</html>
Nach dem Login kopieren

Sehen wir uns den laufenden Effekt an:


So legen Sie die Farbtransparenz in CSS festÄhnliche Videos Teilen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Farbtransparenz in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage