Introduction et fonction de background:transparent en CSS

Parfois, lorsque vous regardez CSS, vous voyez que certaines propriétés CSS sont définies 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.

Par exemple, si un élément recouvre un autre élément et que vous souhaitez afficher l'élément en dessous, vous devez alors définir l'arrière-plan de l'élément ci-dessus sur transparent.

Manuel recommandé :manuel en ligne CSS

Ce qui suit présente le rôle de background:transparent en CSS

1. Introduction à l'arrière-plan

background est un attribut abrégé utilisé pour définir tous les attributs d'arrière-plan dans une seule instruction.

Valeurs possibles :

background-color
background-image
background-repeat
background-attachment
background-position

Par exemple,

background : transparent none repeat scroll 0% 0%

représente respectivement

Attributs d'arrière-plan : couleur d'arrière-plan, image d'arrière-plan, si l'arrière-plan se répète, l'arrière-plan change à tout moment. Fond de défilement du navigateur, position plate, position verticale de l'arrière-plan

background : background-color || background-image || background-repeat || background-attachment || background-position

Explication du CSS ci-dessus

transparent   表示透明无颜色，是background-color 的默认值
none   表示没有设置背景图片
repeat   表示图片重复
scroll   表示背景图片随浏览器下拉而滚动
0%   水平位置在x0
0%   垂直位置在y0

Articles connexes recommandés :
1. Que signifie l’arrière-plan en CSS ? Explication détaillée de l'utilisation de l'arrière-plan
2.Comment utiliser l'attribut transparent pour définir la transparence en CSS ? Dessinez divers triangles avec un attribut transparent (exemple de code)
Tutoriels vidéo associés :
1.Tutoriel vidéo CSS - Jade Girl Heart Sutra Edition

2. Le rôle de background:transparent en CSS

Les événements dont la couleur de fond est transparente seront interceptés par les éléments couverts par celui-ci si l'objet que nous déclenchons le fait. pas focus, alors l'événement sera échangé vers l'élément transparent pour traitement et bullé en fonction de cet élément. Sinon, l'événement avec focus sera traité par l'objet avec focus, sans échange, et bullé en fonction de l'élément focalisé

1. Par exemple, le masque div suivant, cette fonction peut empêcher les utilisateurs d'utiliser d'autres éléments sur la page Web

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+");";

Regardez principalement les deux dernières lignes de code. Si nous n'avons pas le suffixe du code ci-dessus Deux phrases, nous pouvons alors 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.

2. Par exemple, le DIV suivant

<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, il alertera, mais lorsqu'il est couvert par un élément avec une couleur de fond transparente. À ce moment-là, nous ne recevons l'alerte que lorsque nous cliquons sur 123, car le texte peut avoir le focus, et il en va de même pour les autres éléments

.

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!