Explication détaillée de l'attribut transparent ccs et des exemples de méthodes d'héritage transparent en arrière-plan

La transparence peut souvent produire de bons effets visuels sur les pages Web. Tout d'abord, permettez-moi de vous présenter le code de transparence CSS qui est compatible avec les navigateurs grand public :

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

Les attributs ci-dessus sont :
opacity: 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); 0 à 100, les trois autres sont compris entre 0 et 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
Cependant, 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 spécifiez une transparence de 1 pour l'élément parent. élément enfant, il sera invalide.
Pour le cas où le sous-élément est du texte, la solution est généralement de le laisser tranquille tant qu'il est encore clairement visible. 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.
Code HTML :

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

Code CSS

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, réglez simplement la hauteur de p3 à une hauteur suffisante Cette méthode a un très gros inconvénient : il y a un p blanc supplémentaire

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!