So verwenden Sie CSS zum Ausblenden von Bildern (drei Methoden)

Bei der Website-Entwicklung ist manchmal eine spezielle Bearbeitung von Bildern erforderlich. Beispielsweise möchten Sie möglicherweise bestimmte Bilder ausblenden, damit Benutzer sie nur bei Bedarf sehen können. Dazu können wir CSS verwenden, um das Bild auszublenden.

1. Verwenden Sie das Attribut display:none

Die häufigste Methode ist die Verwendung des Attributs display:none, um Bilder auszublenden. In CSS wird die Anzeigeeigenschaft verwendet, um zu definieren, wie viele Felder ein Element generieren soll und wie diese Felder generiert werden sollen. Wenn display:none auf ein Element angewendet wird, wird es nicht gerendert. Daher können wir das Bild ausblenden, indem wir dieses Attribut auf das Bildelement anwenden.

Hier ist ein Beispielcode:

img {
  display: none;
}

Der obige Code wirkt sich auf alle Bildelemente aus und blendet sie alle aus.

Wenn wir ein verstecktes Bild anzeigen müssen, können wir dies mithilfe von JavaScript erreichen. Der folgende Code ruft beispielsweise das Bildelement anhand der ID ab und setzt seine Anzeigeeigenschaft auf „Block“, um das Bild anzuzeigen.

document.getElementById("myImg").style.display = "block";

2. Verwenden Sie das Attribut „visibility:hidden“

Eine weitere gängige Methode ist die Verwendung des Attributs „visibility:hidden“, um Bilder auszublenden. Diese Eigenschaft ähnelt display:none, der Platz des Elements bleibt jedoch unverändert. Das heißt, das Element ist immer noch da, nur versteckt.

Hier ist ein Beispielcode:

img {
  visibility: hidden;
}

Der obige Code blendet alle Bildelemente aus.

Wenn wir ein verstecktes Bild anzeigen müssen, können wir dies mithilfe von JavaScript erreichen. Der folgende Code ruft beispielsweise das Bildelement anhand dieser ID ab und zeigt das Bild an, indem seine Sichtbarkeitseigenschaft auf „sichtbar“ gesetzt wird.

document.getElementById("myImg").style.visibility = "visible";

3. Verwenden Sie das Opazitätsattribut

Sie können das Opazitätsattribut auch verwenden, um Bilder auszublenden. Dieses Attribut wird verwendet, um die Deckkraft des Elements zu steuern und dadurch das Element auszublenden. Wenn die Deckkraft auf 0 eingestellt ist, wird das Element vollständig transparent und zeigt keine Präsenz an.

Hier ist ein Beispielcode:

img {
  opacity: 0;
}

Der obige Code wirkt sich auf alle Bildelemente aus und blendet sie alle aus.

Wenn wir ein verstecktes Bild anzeigen müssen, können wir dies mithilfe von JavaScript erreichen. Der folgende Code ruft beispielsweise das Bildelement anhand dieser ID ab und zeigt das Bild an, indem seine Opazitätseigenschaft auf „1“ gesetzt wird.

document.getElementById("myImg").style.opacity = "1";

Zusammenfassung

Die oben genannten drei Methoden können je nach Situation alle zum Ausblenden von Bildern verwendet werden. Mit der Methode „display:none“ können Sie das Bild vollständig ausblenden und mit der Methode „visibility:hidden“ können Sie den Platz des Elements reservieren. Mit dem Deckkraftattribut können Sie Bilder ein- und ausblenden, indem Sie die Deckkraft festlegen.

In der tatsächlichen Entwicklung können wir diese Methoden verwenden, um Bilder nach Bedarf auszublenden oder anzuzeigen. Diese Methoden sind sehr einfach und leicht zu verstehen und können die meisten Anforderungen abdecken.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS zum Ausblenden von Bildern (drei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!