Quelles sont les méthodes pour masquer des éléments en CSS ? Introduction à quatre méthodes courantes pour masquer des éléments en CSS

Dans le processus de développement Web, nous devons souvent masquer certains éléments et ne les afficher qu'en cas de besoin. Alors, quelles sont les méthodes pour masquer des éléments en CSS ? Cet article vous présentera comment masquer des éléments en CSS.

Il existe de nombreuses façons de masquer des éléments de page à l'aide de CSS. Vous pouvez définir l'opacité sur 0, la visibilité sur cachée, l'affichage sur aucun ou la position sur absolue, puis définir la position sur la zone invisible, etc. Examinons de plus près le contenu spécifique de ces attributs CSS pour masquer les éléments de la page.

Méthode 1 pour masquer des éléments en CSS : Utiliser l'attribut opacité

L'attribut opacité signifie récupérer ou définir l'opacité de l'objet Lorsque sa transparence est de 0, le visuel Il a disparu, mais il occupe toujours cette place et joue un rôle dans la mise en page de la page Web. Il répondra également à l’interaction de l’utilisateur. Pour les éléments auxquels l'attribut opacité a été ajouté, leur arrière-plan et le contenu de l'élément changeront également en conséquence.

.hide {
  opacity: 0;
}

Explication : Nous pouvons utiliser l'attribut opacité pour obtenir de superbes effets d'animation.

Remarque : cet attribut est compatible avec les navigateurs IE9 et supérieurs. IE8 et les versions antérieures prennent en charge des attributs de filtre alternatifs, par exemple : filter:Alpha(opacity=50).

Deuxième méthode d'élément caché CSS : utilisez l'attribut d'affichage

L'attribut d'affichage est le véritable élément caché. Lorsque l'attribut d'affichage de l'élément est aucun, l'élément Il. disparaîtra de la vision, et même le modèle de boîte ne sera pas généré. Il n'occupera aucune position sur la page. De plus, même ses éléments enfants disparaîtront ensemble du modèle de boîte.

.hide {
   display: none;
}

Remarque : les effets d'animation et les interactions qui y sont ajoutés ainsi que ses éléments enfants ne fonctionneront pas.

Troisième méthode d'élément caché CSS : utiliser l'attribut de visibilité

L'attribut de visibilité est similaire à l'attribut d'opacité. Lorsque la valeur de l'attribut est masquée, l'élément sera masqué et. occupera Il contrôle sa propre position et affecte la mise en page de la page Web. La seule différence avec l'opacité est qu'il ne répond à aucune interaction de l'utilisateur. De plus, des éléments seront masqués dans le logiciel de lecture d’écran.

.hide {
   visibility: hidden;
}

Remarque : Cet attribut peut également réaliser des effets d'animation, à condition que ses états initial et final soient différents. Cela garantit que les animations de transition entre les commutateurs d’état de visibilité peuvent être fluides dans le temps.

Méthode 4 pour masquer des éléments en CSS : Utiliser l'attribut position

La signification de l'attribut position est de déplacer l'élément hors du flux documentaire et hors du zone visuelle. L’ajout de cet attribut n’affectera pas la mise en page, tout en gardant les éléments opérationnels. Après avoir appliqué cet attribut, vous pouvez principalement contrôler la direction (haut, gauche, droite, bas) pour atteindre une certaine valeur et quitter la page en cours.

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Remarque : évitez d'utiliser cette méthode pour masquer tout élément pouvant être focalisé, car cela entraînerait un changement de focus imprévisible pour l'utilisateur. Cette méthode est souvent utilisée lors de la création de cases à cocher et de boutons radio personnalisés.

Enfin : pour plus d'informations sur les quatre attributs ci-dessus : opacité, affichage, visibilité et position, veuillez vous référer au manuel CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!