Quels sont les moyens de contrôler le masquage des éléments en CSS3-Questions et réponses frontales-php.cn

Table des matières

Comment CSS3 contrôle le masquage des éléments

Première façon : supprimer l'arborescence d'accessibilité

第二种：隐藏元素

第三种：透明

第四种：缩放

opacité : 0

Maison

interface Web

Questions et réponses frontales

Quels sont les moyens de contrôler le masquage des éléments en CSS3

青灯夜游

Jan 13, 2022 pm 01:49 PM

css3

Méthode de contrôle : 1. Utilisez l'instruction "display:none" pour supprimer l'élément de l'arborescence d'accessibilité afin de masquer l'élément ; 2. Utilisez l'instruction "visibility: Hidden" pour définir l'élément comme étant invisible ; opacity: 0" " L'instruction définit l'élément comme étant transparent ; 4. Laissez l'élément s'éloigner de la position d'affichage à l'écran, etc.

Quels sont les moyens de contrôler le masquage des éléments en CSS3

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

Comment CSS3 contrôle le masquage des éléments

Première façon : supprimer l'arborescence d'accessibilité

display : nonedisplay : none

display属性可以设置元素的内部和外部显示类型。将display设置为none会将元素从可访问性树中移除。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>display : none</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                display : none;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

第二种：隐藏元素

visibility: hidden

将visibility设置为hidden会使元素不可见，但此时元素仍然位于可访问性树中(display: none时元素被移出可访问性树 )，注册点击事件无效。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>visibility: hidden</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

第三种：透明

opacity: 0

opacity(不透明度),取值范围0(完全透明) ~ 1(完全不透明)，将opacity设置为0会使元素完全透明，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>opacity: 0</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

transparent

将元素的background-color、color和border-color设置为transparent(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transparent</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: transparent;
                background-color: transparent;
                border-color: transparent;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

rgba(0,0,0,0)

从技术上说，transparent是 rgba(0,0,0,0) 的简写，将元素的background-color、color和border-color设置为rgba(0,0,0,0)(透明)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中,注册点击事件有效。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>rgba(0,0,0,0)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: rgba(0,0,0,0);
                background-color: rgba(0,0,0,0);
                border-color: rgba(0,0,0,0);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

rgba只需要第四个参数为0即可达到隐藏元素的效果。

hsla(0,0%,0%,0)

hsla使用元素隐藏的机制与rgba一致，都是由第四个参数Alpha所控制的，将元素的background-color、color和border-color设置为hsla(0,0%,0%,0)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>hsla(0,0%,0%,0)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                color: hsla(0,0%,0%,0);
                background-color: hsla(0,0%,0%,0);
                border-color: hsla(0,0%,0%,0);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

hsla和rgba一致，只需要第四个参数为0即可达到隐藏元素的效果。

filter: opacity(0%)

filter(滤镜) opacity(0% ~ 100%)转化图像的透明程度,值范围于0%(完全透明) ~ 100%(完全不透明)之间。将元素的filter设置为opacity(0%)，此时元素不可见(因为它是透明的)，仍然位于可访问性树中，注册点击事件有效。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>filter: opacity(0%)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                filter: opacity(0%);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

第四种：缩放

transform: scale(0, 0)

将transform设置为scale(0, 0)会使元素在x轴和y轴上都缩放到0像素，此元素会显示，也会占用位置，但是因为已经缩放到0%，元素和内容占用像素比为0*0，所以看不到此元素及其内容，也无法点击。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>transform: scale(0, 0)</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                transform: scale(0,0);
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

width: 0;height: 0;overflow: hidden

L'attribut display peut définir le type d'affichage interne et externe du élément . Définir display sur none supprimera l’élément de l’arborescence d’accessibilité.

Code :

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>width: 0;height: 0;overflow: hidden</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                width:0;
                height:0;
                overflow: hidden;
                border-width: 0;/* user agent stylesheet中border-width: 2px; */
                padding: 0;/* user agent stylesheet中padding: 1px 6px; */
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

Deuxième : élément caché
visibilité : cachée
Définir la visibilité sur caché rendra l'élément invisible, mais l'élément est toujours dans l'arborescence d'accessibilité à ce moment ( l'élément est déplacé hors de l'arborescence d'accessibilité lorsque affichage : aucun), l'enregistrement des événements de clic n'est pas valide.

Code :

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>脱离屏幕显示位置</title>
        <style type="text/css">
            p {
                background-color: red;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                margin-top: 24px;
            }
            button {
                background-color: black;
                color: white;
            }
            #bt {
                position: fixed;
                top: -100px;
                left: -100px;
            }
        </style>
    </head>
    <body>
        <p>
            <button id="normal">按钮</button>
        </p>
        <p>
            <button id="bt">按钮</button>
        </p>

        <script type="text/javascript">
            let normal = document.getElementById(&#39;normal&#39;);
            let bt = document.getElementById(&#39;bt&#39;);
            normal.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click normal&#39;);   
            })
            bt.addEventListener(&#39;click&#39;,function(){
                alert(&#39;click bt&#39;);   
            })
        </script>
    </body>
</html>

Copier après la connexion

Troisième type : Transparent

`opacité : 0`

opacité (opacité), plage de valeurs 0 (complètement transparent) ~ 1 (complètement opaque), définira l'opacité sur 0 rend l'élément complètement transparent, auquel cas l'élément n'est pas visible (car il est transparent), est toujours dans l'arborescence d'accessibilité et l'enregistrement des événements de clic est valide.

Code :

rrreee

transparent

Définissez la couleur d'arrière-plan, la couleur et la couleur de la bordure de l'élément sur transparent (transparent). À ce stade, l'élément n'est pas visible (car il l'est). transparent), toujours situé dans l'arborescence d'accessibilité, l'enregistrement des événements de clic est valide.

Code : 🎜rrreee🎜rgba(0,0,0,0)🎜🎜Techniquement parlant, transparent est l'abréviation de rgba(0,0,0,0), qui change l'arrière-plan de les éléments -color, color et border-color sont définis sur rgba(0,0,0,0) (transparent). Pour le moment, l'élément n'est pas visible (car il est transparent) et est toujours dans l'arborescence d'accessibilité. . L'enregistrement des événements de clic est valide. 🎜🎜Code : 🎜rrreee🎜rgba n'a besoin que que le quatrième paramètre soit 0 pour obtenir l'effet de cacher des éléments. 🎜🎜hsla(0,0%,0%,0)🎜🎜hsla utilise le même mécanisme de masquage d'éléments que rgba, qui est contrôlé par le quatrième paramètre Alpha : couleur d'arrière-plan, couleur et. border-color est défini sur hsla(0,0%,0%,0), auquel cas l'élément n'est pas visible (car il est transparent), est toujours dans l'arborescence d'accessibilité et l'enregistrement des événements de clic est valide. 🎜🎜Code : 🎜rrreee🎜hsla est le même que rgba. Seul le quatrième paramètre est 0 pour obtenir l'effet de masquage des éléments.
🎜🎜filtre : opacité(0%)🎜🎜filtre (filtre) opacité (0% ~ 100%) convertit la transparence de l'image, la plage de valeurs est de 0% (complètement transparente ) ~ 100 % (entièrement opaque). Définissez le filtre de l'élément sur l'opacité (0 %). À ce stade, l'élément est invisible (car transparent) et est toujours dans l'arborescence d'accessibilité. L'enregistrement des événements de clic est effectif. 🎜🎜Code : 🎜rrreee🎜🎜Quatrième : Scale🎜🎜🎜transform: scale(0, 0)🎜🎜Définir la transformation sur scale(0, 0) rendra l'élément sur l'axe des x et L'axe y est mis à l'échelle à 0 pixel. Cet élément sera affiché et occupera la position. Cependant, comme il a été mis à l'échelle à 0 %, le rapport de pixels occupé par l'élément et le contenu est de 0*0, donc cet élément et son. le contenu ne peut pas être vu et ne peut pas cliquer. 🎜🎜Code : 🎜rrreee🎜largeur : 0;hauteur : 0;débordement : caché🎜🎜Définissez la largeur et la hauteur sur 0, de sorte que le rapport de pixels occupé par l'élément soit de 0*0, mais à ce moment, deux situations se produiront : 🎜🎜🎜🎜Lorsque l'attribut d'affichage de l'élément est en ligne, le contenu de l'élément étendra la largeur et la hauteur de l'élément 🎜🎜🎜🎜Lorsque l'attribut d'affichage de l'élément est bloc ou ; inline-block, la largeur et la hauteur de l'élément sont 0 , mais le contenu de l'élément est toujours affiché normalement, l'ajout de overflow:hidden; 🎜🎜🎜🎜La différence entre cette méthode et transform: scale(0,0) est que transform: scale(0,0) met à l'échelle à la fois l'élément et le contenu, tandis que cette méthode redimensionne l'élément à 0px puis le recadre. contenu en dehors de l’élément. 🎜🎜Code : 🎜rrreee🎜🎜La cinquième méthode : Position d'affichage hors écran🎜🎜🎜La position d'affichage hors écran peut également rendre l'élément invisible, mais il y a trop de styles CSS pour obtenir cet effet. Voici seulement un exemple de. une situation. 🎜🎜Code : 🎜rrreee🎜 (Partage vidéo 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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

4 Il y a quelques semaines By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

1 Il y a quelques mois By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7676

Tutoriel CakePHP

1393

Tutoriel C#

1207

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

Afficher plus

Related knowledge

Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code) Jun 28, 2022 pm 01:39 PM

Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !

Utilisez habilement CSS pour réaliser divers boutons de forme étrange (avec code) Jul 19, 2022 am 11:28 AM

Cet article va vous montrer comment utiliser CSS pour réaliser facilement divers boutons aux formes étranges qui apparaissent fréquemment. J'espère que cela vous sera utile !

Comment masquer des éléments en CSS sans prendre de place Jun 01, 2022 pm 07:15 PM

Deux méthodes : 1. À l'aide de l'attribut display, ajoutez simplement le style "display:none;" à l'élément. 2. Utilisez les attributs position et top pour définir le positionnement absolu de l'élément afin de masquer l'élément. Ajoutez simplement le style "position:absolute;top:-9999px;" à l'élément.

Comment implémenter des bordures en dentelle en CSS3 Sep 16, 2022 pm 07:11 PM

En CSS, vous pouvez utiliser l'attribut border-image pour réaliser une bordure en dentelle. L'attribut border-image peut utiliser des images pour créer des bordures, c'est-à-dire ajouter une image d'arrière-plan à la bordure. Il vous suffit de spécifier l'image d'arrière-plan comme style de dentelle ; largeur de la bordure de l'image vers l'intérieur. Indique si le début est répété ;".

Comment agrandir l'image en cliquant sur la souris en CSS3 Apr 25, 2022 pm 04:52 PM

Méthode d'implémentation : 1. Utilisez le sélecteur ":active" pour sélectionner l'état du clic de la souris sur l'image ; 2. Utilisez l'attribut de transformation et la fonction scale() pour obtenir l'effet d'agrandissement de l'image, la syntaxe "img:active {transform : échelle (grossissement de l'axe x, grossissement de l'axe y);}".

Il s'avère que le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur ! Jun 10, 2022 pm 01:00 PM

Comment créer un carrousel de texte et un carrousel d'images ? La première chose à laquelle tout le monde pense est de savoir s'il faut utiliser js. En fait, le carrousel de texte et le carrousel d'images peuvent également être réalisés en utilisant du CSS pur. Jetons un coup d'œil à la méthode d'implémentation.

Comment définir la vitesse de rotation de l'animation en CSS3 Apr 28, 2022 pm 04:32 PM

En CSS3, vous pouvez utiliser l'attribut "animation-timing-function" pour définir la vitesse de rotation de l'animation. Cet attribut est utilisé pour spécifier comment l'animation terminera un cycle et définir la courbe de vitesse de l'animation. La syntaxe est "element {. fonction de synchronisation d'animation : valeur de l'attribut de vitesse ;}".

L'effet d'animation CSS3 a-t-il une déformation ? Apr 28, 2022 pm 02:20 PM

L'effet d'animation en CSS3 a une déformation ; vous pouvez utiliser "animation : attribut d'animation @keyframes ..{..{transform : attribut de transformation}}" pour obtenir un effet d'animation de déformation. L'attribut d'animation est utilisé pour définir le style d'animation et le. L'attribut transform est utilisé pour définir le style de déformation.

See all articles