Explication du contexte : transparent en CSS

Cet article présente principalement l'explication sur background:transparent en CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Qu'est-ce qui est exactement transparent en CSS ? ça veut dire ? J'ai toujours trouvé ça étrange. A quoi ça sert ? Cet article l'expliquera en détail. Les amis qui en ont besoin peuvent s'y référer

Parfois, quand je regarde du CSS, je vois ça. certains attributs CSS sont définis comme background:transparent . Cela signifie que l'arrière-plan est transparent. En fait, la couleur par défaut du fond est l’attribut transparent. Donc c'est pareil que j'écrive ou non.
Je n'ai pas écrit d'article depuis un moment, je suis à l'école. Même si j'ai un ordinateur avec moi, je ne peux pas accéder à Internet. J'utilise JavaScript pour écrire une version Web du système d'exploitation. Une fois que je l'aurai écrit, j'en serai sûr. En publiant ceci, j'ai rencontré de nombreux problèmes pendant le processus d'écriture. Beaucoup d'entre eux sont détaillés et très gênants. J'ai travaillé dur pour les résoudre. C'est aussi une sorte d'amélioration pour moi. Maintenant, laissez-moi parler d'un problème que j'ai rencontré récemment
Comme tout le monde le sait, vous utilisez createelement pour créer un nouveau p. l'attribut dans le style de ce p est transparent Haha, si je fais un masque de p, alors veuillez regarder le code suivant :

p.style.position="absolute"; 
p.style.width=document.body.clientWidth+"px"; 
p.style.height=document.body.clientHeight+"px"; 
p.style.left="0px"; 
p.style.top="0px"; 
p.style.zIndex="2000"; 
p.style.backgroundColor="black"; 
p.style.filter="alpha(opacity="+0+");";

Il s'agit de nombreux paramètres de masque p, qui signifie que les utilisateurs ne peuvent pas utiliser d'autres éléments sur la page Web.
Nous examinons principalement les deux dernières lignes de code. Ne l'avons-nous pas déjà dit auparavant, p L'attribut backgroundcolor par défaut est transparent, ce qui est transparent, donc. pourquoi devons-nous passer à l'étape supplémentaire pour définir un noir (cela n'a pas d'importance, définissez simplement une couleur tant qu'elle n'est pas transparente et qu'il ne peut pas s'agir d'une chaîne vide, le navigateur utilisera par défaut une chaîne vide comme transparente ), et j'ai défini un filtre pour le rendre transparent.
J'ai fait l'expérience moi-même. Au début, j'étais confus par les résultats du test, mais après m'être calmé et y avoir réfléchi, j'ai découvert la différence. deux phrases du code ci-dessus, nous pouvons opérer sur les éléments masqués, ce qui signifie que cela n'aura pas d'effet de blindage, mais cette opération est limitée. Plus précisément, nous ne pouvons opérer que sur les éléments ciblés, tels que le texte. images, boutons, etc., laissez-moi vous donner un exemple :

<p style="border:1px red solid;width:100px;height:100px" onclick="alert(1)">123</p>

Dans des circonstances normales, tant que vous cliquez n'importe où sur ce p, il vous alertera, mais lorsqu'il est réglé sur transparent avec un backgroundcolor Lorsque l'élément est couvert, nous ne pouvons alerter que si nous cliquons sur 123, car le texte peut obtenir le focus, et il en va de même pour les autres éléments. D'ailleurs, l'événement de l'élément dont la couleur d'arrière-plan est transparente affectera l'élément. couvert par celui-ci. Si l'objet que nous déclenchons n'a pas le focus, l'événement sera échangé vers l'élément transparent pour être traité et bouillonné en fonction de cet élément. Sinon, l'événement avec le focus sera traité par l'objet avec le focus, et ne sera pas échangé, et l'événement sera bouillonné en fonction de cet élément. L'élément focalisé bouillonne. (Cela ne semble pas très facile à comprendre. Vous pouvez le comprendre en faisant plus d'expériences.)
Disons-le ainsi, tout le monde. comprend. C'est pourquoi les deux dernières phrases sont nécessaires. Ce n'est qu'ainsi que nous pouvons protéger complètement les éléments de la page Web
Définir le style sur une couleur transparente
Parfois, si le texte ci-dessus dit

background:inherit;

background:transparent;

Si un élément recouvre un autre élément et que vous souhaitez afficher l'élément en dessous, alors vous devez définir l'arrière-plan de l'élément ci-dessus sur transparent
Veuillez me corriger s'il y a des inexactitudes dans l'article. Le contenu de cet article a été testé et passé sous IE7.0. >Ce qui précède est l'intégralité du contenu de cet article.J'espère qu'il sera utile à l'étude de tout le monde.Plus connexe Veuillez faire attention au contenu du site Web PHP chinois !

Recommandations associées :

CSS Introduction à l'utilisation de l'attribut solide de Border

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!