Der Unterschied zwischen Anzeige, Sichtbarkeit, Deckkraft, RGBA und Z-Index: -1 in CSS

Wir müssen oft die versteckten, transparenten und anderen Eigenschaften einiger Elemente auf der Webseite steuern

<Stil>
    .d1{
      Anzeige: keine;
    }
    .d2{
      Sichtbarkeit: sichtbar;
    }
    .d3{
      Deckkraft: 0;
    }
  </Stil>

  <div Klasse = "d1" onclick = "Klickereignis ('Anzeige: keine;')"></div>
  <div Klasse = "d2" onclick = "clickEvent('Sichtbarkeit: ausgeblendet;')"></div>
  <div Klasse="d3" onclick="clickEvent('opacity: 0;')"></div>
  <Skripttyp="text/javascript">
    Funktion clickEvent(Typ){
      Alarm (Typ)
    }
  </Skript>

Anzeige: keine;

1. DOM-Struktur: Elemente mit „display:none“ werden vom Browser nicht gerendert und belegen keinen Platz.
2. Ereignisüberwachung: Eine DOM-Ereignisüberwachung ist nicht möglich
3. Leistung: Das dynamische Ändern dieser Eigenschaft führt zu einer Neuordnung und damit zu einer schlechten Leistung.
4. Vererbung: Wird nicht von untergeordneten Elementen geerbt, da untergeordnete Elemente nicht gerendert werden
5. Übergang: Übergang unterstützt keine Anzeige

Sichtbarkeit: versteckt;

1. DOM-Struktur: Das Element ist ausgeblendet, wird aber gerendert und verschwindet nicht, da es Platz einnimmt
2. Ereignisüberwachung: Eine DOM-Ereignisüberwachung ist nicht möglich
3. Leistung: Das dynamische Ändern dieser Eigenschaft führt zu einem Neuzeichnen, was zu einer höheren Leistung führt
4. Vererbt: Wird von untergeordneten Elementen geerbt, aber untergeordnete Elemente können durch Festlegen der Sichtbarkeit sichtbar gemacht werden: sichtbar;
5. Übergang: sichtbare werden sofort angezeigt, und versteckte können überblendet werden

Deckkraft: 0;

1. DOM-Struktur: Bei einer Transparenz von 100 % ist das Element ausgeblendet und nimmt Platz ein
2. Ereignisüberwachung: Sie können DOM-Ereignisse überwachen
3. Leistung: Wird zu einer zusammengesetzten Ebene hochgestuft, löst kein Neuzeichnen aus und hat eine höhere Leistung
4. Vererbung: Wird von untergeordneten Elementen geerbt und untergeordnete Elemente können nicht durch Opazität sichtbar gemacht werden: 1;
5. Übergang: Sowohl das Ausblenden als auch das Anzeigen unterstützen den Übergang

rgb

1. Hintergrund: rgba(R, G, B, 0), nur die Hintergrundfarbe ist transparent, das Element ist transparent und nimmt trotzdem Platz ein.
2. Hintergrund: rgba (R, G, B, 0) wird nicht von untergeordneten Elementen geerbt
3. Die gebundenen Ereignisse können weiterhin ausgelöst werden.
4. Übergang ist gültig.

Z-Index: -1

1. Das Festlegen des Z-Index funktioniert nur, wenn sich der aktuelle DOM des Elements außerhalb des Dokumentflusses befindet (Position: absolut).
2. Durch Festlegen des Z-Index: -1 wird im Wesentlichen der Stapelkontext des aktuellen DOM geändert, wobei das Element unter anderen Elementen platziert wird, um den Zweck des Ausblendens zu erreichen.
3. Teilweise Neuanordnung ohne Beeinträchtigung des Layouts anderer Ebenen
4. Der von anderen Elementen blockierte Teil kann nicht auf Ereignisse reagieren und kann nicht angeklickt werden, selbst wenn das obere Element mit pointer-events:none eingestellt ist; (Hinweis: Diese Eigenschaft wird vererbt)

Ein kleines Experiment

Sie können es selbst ausprobieren und spielen.

//html
<div Klasse="Container">
    <div Klasse="Ziel">
        <p>Ich bin das Ziel, und Sie?</p>
    </div>
</div>


// CSS
  <Stil>
      .Container{
          Rand: 0 automatisch;
          Breite: 500px;
          Mindesthöhe: 30px;
          Hintergrundfarbe: himmelblau;
      }
      .Ziel{
          Breite: 200px;
          Höhe: 50px;
          Zeilenhöhe: 50px;
          Textausrichtung: zentriert;
          Rand: 0 automatisch;
          Hintergrundfarbe: Pflaume;
          Farbe: #fff;
          Übergang: alles lineare 1en;
          Cursor: Zeiger;
      }
      .clickBlock{
        Anzeige: keine;
      }
      .clickVisibility{
          Sichtbarkeit: versteckt;
      }
      .clickOpacity{
          Deckkraft: 0;
      }
      .clickRgba{
          Hintergrundfarbe: rgba(221, 160, 221, 0);
      }
      .clickZindex{
          z-Index: -1;
          Position: absolut;
      }
  </Stil>

// js
    const _target = document.getElementsByClassName("target")[0];
    _target.onclick = (() => {
        let i = 1; // Klick mal return () => {
        // _target.attributes.class.value += " KlickBlock";
        // _target.attributes.class.value += " Klicksichtbarkeit";
        // _target.attributes.class.value += " clickOpacity";
        // _target.attributes.class.value += " clickRgba ​​";
        _target.attributes.class.value += " clickZindex";
        console.log(`${i}ter Klick`);
        ich++;
    }})();

Dies ist das Ende dieses Artikels über die Unterschiede zwischen Anzeige, Sichtbarkeit und Deckkraft in CSS. Weitere Informationen zur Steuerung versteckter Inhalte durch CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!