La signification et la fonction de background:transparent en CSS

Transparent signifie transparent. En fait, la couleur par défaut de l'arrière-plan est l'attribut transparent
Scénarios d'utilisation générale :
Si un élément recouvre un autre élément et que vous souhaitez afficher l'élément suivant, alors vous devez le faire. définir l'arrière-plan de l'élément ci-dessus sur transparent

Parfois, lorsque je regarde CSS, je vois certains attributs CSS 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. C'est donc pareil, que j'écrive ou non. Je n'ai pas écrit d'article depuis un moment. Même si j'ai un ordinateur avec moi, je n'ai pas accès à Internet pour le moment. une version Web du système d'exploitation. Je la publierai certainement une fois terminée. J'ai rencontré de nombreux problèmes pendant le processus d'écriture, dont beaucoup étaient détaillés et très gênants. Cependant, j'ai travaillé dur pour les résoudre, ce qui est le cas. 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 vous le savez, vous utilisez createelement pour créer un nouveau div. Par défaut, l'attribut backgroungcolor dans le style de ce div est transparent. Je crée un masque pour un div, puis veuillez consulter le code suivant : Copiez le code comme suit :

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

Il s'agit du paramètre de nombreux divs masqués, ce qui signifie que les utilisateurs sont protégés contre l'utilisation d'autres éléments sur la page Web. Nous examinons principalement les deux dernières lignes de code. Comme mentionné précédemment, l'attribut backgroundcolor par défaut de div est transparent, alors pourquoi prenons-nous la peine de définir un noir (ce n'est pas le cas). Peu importe, 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 traitera la chaîne vide comme transparente par défaut), et définissez le filtre pour la rendre transparente. J'ai fait le test moi-même. . J'ai été confus par les résultats des tests au début, mais après m'être calmé et y avoir réfléchi, j'ai découvert la différence. Si nous n'avons pas les deux dernières phrases du code ci-dessus, alors nous pouvons opérer sur des éléments masqués, ce qui signifie qu'il n'a pas d'effet de blindage, mais cette opération est limitée Plus précisément, nous ne pouvons opérer que sur des éléments ciblés, tels que du texte, des images, des boutons, etc. , permettez-moi de vous donner un exemple : copiez le code comme suit. :

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

Dans des circonstances normales, tant que vous cliquez n'importe où sur ce div, une alerte apparaîtra, mais lorsqu'elle est obscurcie par un élément avec une couleur de fond transparente à ce moment-là, nous obtenons seulement l'alerte lorsque 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 cet élément avec une couleur de fond transparente sera intercepté par l'élément couvert par celui-ci. L'objet déclenché n'a pas le focus, alors l'événement sera échangé vers l'élément transparent pour traitement 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 le sera. bouillonné en fonction de l'élément avec le focus. (Cela ne semble pas facile à comprendre, vous pouvez le comprendre en faisant plus d'expériences.) Parfois, lorsque vous définissez le style sur une couleur transparente, le code de copie écrit ci-dessus est le suivant : include; Ensuite, vous devrez peut-être effacer l'arrière-plan ci-dessous, j'ai simplement écrit le code de copie comme suit : background:transparent; fond transparent, c'est-à-dire supprimer l'arrière-plan si un élément recouvre un autre élément et que vous souhaitez afficher l'élément suivant. , alors vous devez définir l'arrière-plan de l'élément ci-dessus. Utilisez createelement pour créer un nouveau div pour transparent

Par défaut, l'attribut backgroungcolor dans le style de ce div est transparent. Je crée un masque pour le div, puis veuillez consulter le morceau de code suivant :
Il s'agit du paramètre de nombreux divs masqués, ce qui signifie que les utilisateurs ne peuvent pas utiliser d'autres éléments sur la page Web.
Nous regardons principalement au niveau des deux dernières lignes de code. Comme mentionné précédemment, l'attribut backgroundcolor par défaut de div est transparent , c'est-à-dire qu'il est transparent, alors pourquoi prenons-nous la peine de définir un noir (cela n'a pas d'importance, définissez simplement une couleur aussi longue que possible). comme elle n'est pas transparente et qu'il ne peut pas s'agir d'une chaîne vide, le navigateur traitera la chaîne vide comme transparente par défaut) et définira le filtre pour la rendre transparente
J'ai fait le test moi-même. résultats des tests au début, mais après m'être calmé et y avoir réfléchi, j'ai découvert la différence. Si nous n'avions pas les deux dernières parties du code ci-dessus, la phrase, alors nous pouvons opérer sur les éléments masqués, ce qui signifie que c'est le cas. 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 des éléments ciblés, tels que des images, des boutons, etc., permettez-moi de vous donner un exemple :
Dans des circonstances normales, tant. lorsque vous cliquez n'importe où sur ce div, il sera alerté, mais lorsqu'il est recouvert par un élément avec une couleur d'arrière-plan transparente, nous ne pouvons cliquer que sur 123. Il alertera, car le texte peut obtenir le focus, et il en va de même pour les autres éléments. À propos, l'événement de cet élément avec une couleur d'arrière-plan transparente sera intercepté par l'élément qu'il recouvre. Si l'objet que nous déclenchons n'a pas le focus, l'événement sera alors échangé vers l'élément transparent pour traitement et bouillonné. selon cet élément. Sinon, l'événement avec le focus sera traité par l'objet avec le focus, ne sera pas échangé, et bouillonnera en fonction de l'élément avec le focus (Cela ne semble pas être très facile à comprendre, vous pouvez. comprenez-le si vous l'essayez davantage par vous-même)

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!