Detaillierte Erklärung der CSS-Opazitätseigenschaft-CSS-Tutorial-php.cn

Detaillierte Erklärung der CSS-Opazitätseigenschaft

青灯夜游

Freigeben： 2018-09-17 17:24:40

Original

7875 Leute haben es durchsucht

In diesem Kapitel erhalten Sie eine detaillierte Erklärung der Deckkraft-Deckkraft von CSS, damit jeder verstehen kann, was das Deckkraftattribut ist und welche Merkmale das Deckkraftattribut hat. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Opazitätsattribut

1. Es ist üblich, „Transparenz“ zu sagen ", Eigentlich sollte es „Opazität“ heißen. Deckkraft bedeutet: undurchsichtig, während der Standardwert der Hintergrundfarbe: transparent „transparent“ bedeutet. Daher wird die Deckkraft verwendet, um die Deckkraft festzulegen. Der Wert reicht von [0,0 bis 1,0], was bedeutet, dass 0,0 nicht sichtbar ist, aber vorhanden ist.

Standard: 1, vollständig undurchsichtig.

Geerbt: Standardmäßig geerbt. Wenn Sie also die Deckkraft auf das übergeordnete Element festlegen, erben alle untergeordneten Elemente auch das Deckkraftattribut.

<style>
div{
    background-color: red;
}
.opacity{
    opacity: 0.5;
}
</style>
---------------------------
<div>
文本和背景色都受到不透明度级别的影响。
</div>
<br/>
<div class="opacity">
文本和背景色都受到不透明度级别的影响。
</div>

Nach dem Login kopieren

Rendering:

Alle Browser unterstützen das Opazitätsattribut und IE8 und frühere Versionen unterstützen das alternative Filterattribut. Detaillierte Erklärung der CSS-Opazitätseigenschaft

filter:alpha(opacity=number), wobei number den Wert [0~100] annimmt, 0 völlig transparent und 100 undurchsichtig ist.

Aus Kompatibilitätsgründen kann es also wie folgt geschrieben werden:

.opacity{
    opacity: 0.5;
    filter:alpha(opacity=50);
}

Nach dem Login kopieren

2. Deckkraft für untergeordnete Elemente festlegen

Das übergeordnete Element legt die Deckkraft fest Untergeordnete Elemente legen auch die Deckkraft des untergeordneten Elements fest. Unter FF und Chrome ist die endgültige Deckkraft des untergeordneten Elements = Deckkraft des übergeordneten Elements * Deckkraft des untergeordneten Elements.

Dies kann erklären, warum, nachdem das übergeordnete Element die Deckkraft festgelegt hat, das untergeordnete Element die Deckkraft auf 1 setzt [d. h. vollständig undurchsichtig], dies jedoch nicht wirksam wird.

Beispiel:

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
<head>
  <title>透明度by starof</title>
  <style>
div{
    background-color: red;
}
.opacity{
    opacity: 0.5;
}
.sonOpacity{
    opacity: 0.3;
}
</style>
<body>
<div>
<p>不设置opacity效果<p>
</div>
<div class="opacity">
  <p>父元素(div)设置opacity:0.5效果</p>
</div>
<div class="opacity">
  <p class="sonOpacity">父元素(div)设置opacity:0.5，同时子元素（p）设置opacity:0.3效果</p>
</div>
</body>
</html>

Nach dem Login kopieren

Rendering:

Detaillierte Erklärung der CSS-Opazitätseigenschaft 3. Effektanzeige

1) Halbtransparenter Hintergrundeffekt

kann die folgenden Effekte erzeugen:

<!DOCTYPE html>
<html>
<head>
    <title>b.html</title>
    <meta charset="UTF-8">
    <style>
.background{
    width: 400px;
    height: 250px;
    margin:15px;
    background:url(img/wl.jpg) no-repeat;
    border: 1px solid red;
}
.opacity{
  width: 350px;
  height: 204px;
  margin:20px;
  padding:0;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}
P{
  margin: 30px 40px;
  line-height:1.5;
}
</style>
</head>
<body>
    <div class="background">
        <div class="opacity">
            <p>一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>
        </div>
    </div>

</body>
</html>

Nach dem Login kopieren

2) Das übergeordnete Element und das untergeordnete Element legen gleichzeitig die Deckkraft fest des untergeordneten Elements ist die Deckkraft des übergeordneten Elements*child Das Element opacity

entfernt die Hintergrundfarbe und der Effekt ist deutlicher, wenn Sie nur den Text sehen.

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
<head>
  <title>透明度by starof</title>
  <style>
.opacity{
    opacity: 0.5;
}
.sonOpacity{
    opacity: 0.5;
}
.sonOpacity2{
    opacity: 0.25;
}
</style>
<body>
<div>
<p>不设置opacity效果<p>
</div>
<div class="opacity">
  <p>父元素(div)设置opacity:0.5效果</p>
</div>
<div class="opacity">
  <p class="sonOpacity">父元素(div)设置opacity:0.5，同时子元素（p）设置opacity:0.5效果</p>
</div>
<div>
  <p class="sonOpacity2">父元素(div)不设置opacity，子元素（p）设置opacity:0.25效果，和上面的文字透明度一样</p>
</div>
</body>
</html>

Nach dem Login kopieren

Rendering:

Detaillierte Erklärung der CSS-Opazitätseigenschaft

2. Vergleich von Deckkraft und RGBA-Modi

Syntax:

rgba(r,g,b,a)；

Nach dem Login kopieren

[R:red,G:green,B:blue,A:alpha]

Die ersten drei Parameter sind RGB-Werte im Bereich von [0~255] , der letzte Parameter stellt Transparenz dar, Wert [0~1].

Hintergrundfarbe: rgba(255,0,0,0.5);

Sehen Sie sich ein Beispiel für den Vergleich zwischen Deckkraft und RGBA an:

<style type="text/css">
    div{
      display: inline-block;
      width: 200px;
      height: 100px;
      text-align: center;
      font-size: 20px;
    }
   .opacity{
    background-color: rgb(255,0,0);
    opacity: 0.5;
    }
    .rgba{
    background-color: rgba(255,0,0,0.5);
    }
</style>
----------------------------------------------
<body >
  <div class="opacity">
    <p>opacity效果</p>
  </div>
  <div class="rgba">
    <p>transparent效果</p>
  </div>
</body>

Nach dem Login kopieren

Rendering:

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der CSS-Opazitätseigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!