Comment contrôler le masquage des éléments avec CSS

Méthode : 1. Utilisez "opacity:0;" 2. Utilisez "visibility: caché;" 3. Utilisez "diaplay:none;" 4. Utilisez "position:absolute;top:-999px;" 5. ,Utilisez l'attribut clip-path.

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

Il existe de nombreuses façons de masquer des éléments de page à l'aide de CSS.

Première méthode : opacity: 0;

L'attribut opacity est généralement utilisé pour définir la transparence d'un élément. D'un autre point de vue, si la transparence est de 0, l'élément est visuellement masqué.

Cet attribut n'est pas conçu pour modifier le cadre de délimitation de l'élément. L'élément lui-même occupe toujours sa propre position et contribue à la mise en page de la page Web. Il répondra également à l'interaction de l'utilisateur.

Deuxième méthode : visibility: hidden;

Le deuxième attribut dont il faut parler est la visibilité.

Définir sa valeur sur caché masquera notre élément.

Comme l'attribut opacité, les éléments masqués affecteront toujours la mise en page de notre page Web.

La seule différence avec l'opacité est qu'elle ne répond à aucune interaction de l'utilisateur.

De plus, après avoir défini cet attribut, l'élément sera masqué dans le logiciel de lecture d'écran.

Une autre chose à noter est que si la visibilité d'un élément est définie sur masquée, mais que vous souhaitez afficher l'un de ses éléments descendants, il vous suffit de définir explicitement la visibilité de cet élément descendant sur visible (remplacement de style).

La troisième méthode : diaplay: none;

L'attribut display masque véritablement l'élément selon le sens du mot.

Définissez l'attribut display sur none pour garantir que l'élément est invisible et que même le modèle de boîte n'est pas généré. Grâce à cet attribut, l'élément caché n'occupe aucun espace.

De plus, une fois l'affichage réglé sur aucun, toute opération d'interaction directe de l'utilisateur sur l'élément ne sera pas efficace.

De plus, le logiciel de lecture d'écran ne lira pas le contenu de l'élément, car cette méthode produit l'effet comme si l'élément n'existait pas du tout.

Tous les éléments descendants de cet élément seront également masqués en même temps.

L'ajout d'une animation excessive à cette propriété n'a aucun effet, tout basculement entre ses différentes valeurs d'état prendra toujours effet immédiatement.

Veuillez toutefois noter que cet élément est toujours accessible via le DOM. Vous pouvez donc le manipuler via le DOM.

La quatrième méthode : position: absolute;

Supposons qu'il existe un élément avec lequel vous souhaitez interagir, mais que vous ne souhaitez pas qu'il affecte la mise en page de votre page Web. Il n'existe aucun attribut approprié pour gérer cette situation (opacité). et la visibilité affectent la mise en page (mdisplay n'affecte pas la mise en page mais ne peut pas interagir directement).

Dans ce cas, vous pouvez uniquement envisager de déplacer l'élément hors de la zone visible. Cette méthode n'affectera pas la mise en page et pourra maintenir l'élément opérationnel.

Plus précisément, ceci est réalisé en définissant l'attribut position sur absolu (positionnement absolu).

position: absolute;
top: -999px;
left: -999px;

La cinquième méthode : clip-path

Une autre façon de masquer des éléments consiste à les découper, notamment via l'attribut clip-path. Cet attribut est relativement nouveau et a une mauvaise compatibilité avec les navigateurs.

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

Mais encore faut-il le comprendre.

(Partage de vidéos d'apprentissage : 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!