Comment masquer du texte en CSS

Méthodes pour masquer le texte : 1. Utilisez l'attribut d'affichage, la syntaxe "display:none;"; 2. Utilisez l'attribut de visibilité, la syntaxe "visibility: Hidden;" ; la syntaxe "opacité:0 ;".

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

1. 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 nul, l'élément disparaît de la vision. 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 : tous les effets d'animation et interactions qui y sont ajoutés et ses éléments enfants ne fonctionneront pas.

2. Utilisez 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 le sera. être masqué. Occupe sa propre position et contribue à 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.

3. Utilisez l'attribut opacité
L'attribut opacité signifie récupérer ou définir l'opacité de l'objet Lorsque sa transparence est 0, il disparaît visuellement. il occupe toujours ce poste 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, tels que : filter:Alpha(opacity=50).

Apprentissage recommandé : Tutoriel vidéo 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!