Explication détaillée de la propriété de transparence CSS (code)

Cet article présente une explication détaillée des propriétés transparentes CSS et un hack pour résoudre l'héritage de transparence d'arrière-plan. Si vous utilisez un arrière-plan transparent CSS, cet article peut vous aider à résoudre de nombreux problèmes d'incompatibilité

La transparence produit souvent de bons résultats. Pour les effets visuels des pages Web, nous fournissons d'abord un code CSS transparent compatible avec les navigateurs grand public :

Le code est le suivant :

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

Les attributs ci-dessus sont :

opacité : 0,5 ; C'est le plus important car il s'agit d'un standard CSS. Cette propriété prend en charge Firefox, Safari et Opera

filter:alpha(opacity=50); can La valeur varie de 0 à 100, et les trois autres sont de 0 à 1.

-moz-opacity:0.5; Ceci permet de prendre en charge certaines anciennes versions du navigateur Mozilla.

-khtml-opacity : 0.5 ; Ceci permet de prendre en charge certaines anciennes versions du navigateur Safari.

Problème d'héritage de transparence CSS :

La propriété de transparence CSS implique un problème d'héritage Lorsque la transparence est définie pour l'élément parent, l'élément enfant héritera automatiquement de sa transparence, même si vous définissez la transparence pour. à nouveau l'élément enfant Spécifier une transparence de 1 n'est pas non plus valide.

Pour le cas où le sous-élément est du texte, ma solution est généralement de le laisser tranquille tant qu'il est encore visible clairement. Un autre compromis consiste à attribuer une couleur relativement plus foncée au sous-élément de texte. En d’autres termes, lorsque l’élément enfant hérite de la transparence, la couleur du texte résultant correspond exactement à celle souhaitée. Le principe est que cette couleur a encore la possibilité de s'approfondir et que les valeurs de couleur et de transparence doivent être calculées en détail.

Il y a aussi le dicton "annuler l'héritage de transparence", qui n'est pas très précis. Pour autant que je sache personnellement, il n'y a aucun moyen d'annuler l'héritage de transparence. On peut seulement dire qu'il existe certains hacks qui peuvent être utilisés lorsque vous souhaitez obtenir "plusieurs éléments couvrant et rendant uniquement transparents les éléments spécifiés".

Après avoir cherché, j'ai trouvé un bon moyen d'obtenir cet effet - une question sur l'héritage transparent. Les amis intéressés peuvent y jeter un œil. Le principe est très simple, ajoutez un élément vide comme calque transparent, et l'élément qui ne veut pas être transparent mais qui doit obtenir un effet couvrant est un élément frère. L'élément parent est positionné à l'aide de position:relative ; les deux éléments enfants sont positionnés à l'aide de position:absolute pour obtenir une couverture.

Le code HTML est le suivant :

<p class="p3"><p class="p4"></p>这里文字图片都没透明度了 
<p class="p2">图片</p> 
</p>

Le code CSS est le suivant :

body { 
background-image: url(./105247.png); 
background-repeat: repeat; 
} 
.p2{width:100px; height:100px; background: url(./testbok.png)} 
.p3{width:200px; height:200px; position:relative; margin-top:10px} 
.p4{position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}

Si la hauteur de votre conteneur extérieur est variable, alors définissez simplement la hauteur de p3 Juste assez de hauteur.
Cette méthode présente un très mauvais inconvénient : il y a un p vierge supplémentaire.

Ce qui précède est le contenu détaillé de Explication détaillée de la propriété transparente CSS (Code) Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !