So steuern Sie das Ausblenden von Elementen mit CSS

Methode: 1. Verwenden Sie „opacity:0;“; 3. Verwenden Sie „diaplay:none;“; ,Verwenden Sie das Clip-Pfad-Attribut.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Es gibt viele Möglichkeiten, Seitenelemente mithilfe von CSS auszublenden.

Die erste Methode: opacity: 0;opacity: 0;

opacity属性通常用于设置一个元素的透明度，从另一个角度来看，如果透明度为0，也就从视觉上隐藏了该元素。

这个属性不是为改变元素的边界框（bounding box）而设计的，元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。

第二种方法：visibility: hidden;

第二个要说的属性是visibility。

将它的值设为hidden将隐藏我们的元素。

如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。

与opacity唯一不同的是它不会响应任何用户交互。

此外，设置了该属性之后，元素在读屏软件中会被隐藏。

另外要注意的是，如果一个元素的visibility被设置为hidden之后，却想要显示它的某个子孙元素，只要将那个子孙元素的visibility显式设置为visible即可（样式覆盖）。

第三种方法：diaplay: none;

display属性依照词义才是真正地隐藏了元素。

将display属性设为none就能确保元素不可见并且连盒模型也不生成，使用这个属性，被隐藏的元素不占据任何空间。

不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。

此外，读屏软件也不会读到元素的内容，因为这种方式产生的效果就像元素完全不存在。

任何这个元素的子孙元素也会被同时隐藏。

为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。

不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。

第四种方法：position: absolute;

假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。

在这种情况下，只能考虑将元素移出可视区域，这个办法既不会影响布局，有可能让元素保持可以操作。

具体是通过将position属性设置为absolute来实现（绝对定位）。

第五种方法：clip-path

opacity-Attribut wird normalerweise verwendet, um die Transparenz eines Elements festzulegen. Wenn die Transparenz aus einer anderen Perspektive 0 ist, wird sie visuell angezeigt versteckt.

Dieses Attribut dient nicht dazu, den Begrenzungsrahmen des Elements zu ändern. Das Element selbst nimmt weiterhin seine eigene Position ein und trägt zum Layout der Webseite bei. Es reagiert auch auf Benutzerinteraktionen.

Zweite Methode: sichtbarkeit: versteckt;

Das zweite Attribut, über das es zu sprechen gilt, ist die Sichtbarkeit. 🎜🎜Setzen Sie den Wert auf „Hidden“, um unser Element auszublenden. 🎜🎜Wie das Deckkraftattribut wirken sich ausgeblendete Elemente weiterhin auf das Layout unserer Webseite aus. 🎜🎜Der einzige Unterschied zur Opazität besteht darin, dass sie nicht auf Benutzerinteraktionen reagiert. 🎜🎜Außerdem wird das Element nach dem Setzen dieses Attributs in der Screenreader-Software ausgeblendet. 🎜🎜Eine weitere zu beachtende Sache ist, dass Sie, wenn die Sichtbarkeit eines Elements auf „Ausgeblendet“ eingestellt ist, Sie aber eines seiner Nachkommenelemente anzeigen möchten, nur die Sichtbarkeit dieses Nachkommenelements explizit auf „Sichtbar“ setzen müssen (Stilüberschreibung). 🎜🎜🎜Die dritte Methode: diaplay: none;🎜🎜🎜Das Anzeigeattribut verbirgt das Element tatsächlich entsprechend der Bedeutung des Wortes. 🎜🎜Setzen Sie das Anzeigeattribut auf „Keine“, um sicherzustellen, dass das Element unsichtbar ist und selbst das Boxmodell nicht generiert wird. Mit diesem Attribut belegt das ausgeblendete Element keinen Platz. 🎜🎜Darüber hinaus ist jede direkte Benutzerinteraktion am Element wirkungslos, sobald die Anzeige auf „Keine“ eingestellt ist. 🎜🎜Außerdem liest die Bildschirmlesesoftware den Inhalt des Elements nicht, da diese Methode den Effekt erzeugt, als ob das Element überhaupt nicht vorhanden wäre. 🎜🎜Alle von diesem Element abgeleiteten Elemente werden gleichzeitig ebenfalls ausgeblendet. 🎜🎜Das Hinzufügen einer übermäßigen Animation zu dieser Eigenschaft hat keine Auswirkung. Jeder Wechsel zwischen den verschiedenen Statuswerten wird immer sofort wirksam. 🎜🎜Bitte beachten Sie jedoch, dass auf dieses Element weiterhin über das DOM zugegriffen werden kann. Sie können es also über das DOM manipulieren. 🎜🎜🎜Vierte Methode: position: absolute;🎜🎜🎜Angenommen, es gibt ein Element, mit dem Sie interagieren möchten, das aber das Layout Ihrer Webseite nicht beeinträchtigen soll Kein geeignetes Attribut für diese Situation (Deckkraft und Sichtbarkeit wirken sich auf das Layout aus, mdisplay hat keinen Einfluss auf das Layout, kann aber nicht direkt interagiert werden). 🎜🎜In diesem Fall können Sie nur in Betracht ziehen, das Element aus dem sichtbaren Bereich zu verschieben. Diese Methode hat keinen Einfluss auf das Layout und hält das Element möglicherweise betriebsbereit. 🎜🎜 Konkret wird dies erreicht, indem das Positionsattribut auf absolut (absolute Positionierung) gesetzt wird. 🎜🎜🎜Die fünfte Methode: clip-path🎜🎜🎜Eine andere Möglichkeit, Elemente auszublenden, insbesondere über das Attribut „clip-path“. wird auch relativ schlecht sein. 🎜rrreee🎜Aber es ist trotzdem notwendig, es zu verstehen. 🎜🎜(Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜

Das obige ist der detaillierte Inhalt vonSo steuern Sie das Ausblenden von Elementen mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!