Exemple de la façon dont CSS rend l'arrière-plan transparent et le texte opaque

Lorsque nous concevons et réalisons certaines pages Web, nous pouvons utiliser des effets translucides. Tout d'abord, nous pouvons penser à utiliser le traitement d'image PNG. Bien sûr, c'est un bon moyen. Le seul problème de compatibilité est le BUG sous ie6. mais ce n'est pas difficile, ajoutez simplement un morceau de traitement js. Mais si nous avons besoin d'un calque contextuel de masque semi-transparent, tel qu'une boîte de connexion, une zone d'enregistrement, une invite, etc., alors la page entière devra peut-être être recouverte par un calque de masque semi-transparent si des vignettes d'arrière-plan sont utilisées. , alors ce n'est peut-être pas une bonne idée pour le moment. Des images plus grandes affecteront la vitesse de chargement et augmenteront également la quantité de calculs de rendu sur la page. Vous devrez peut-être utiliser des filtres CSS.

Supposons qu'il existe un tel exemple : "Il y a un bloc DIV, ce DIV est noir et translucide, mais le contenu à l'intérieur de ce DIV doit rester intact et ne peut pas être transparent", alors que devons-nous faire ?

Si nous écrivions la partie HTML comme ceci

<div class="touMingDiv">  
    <div>  
        <h1>这是透明的层这是透明的层这是透明的层这是透明的层  
            这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层  
        </h1>  
    </div>  
    <p>  
        这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome  
    </p>  
    <img src="bg.jpg"/>  
</div>

Pour CSS, nous pourrions l'écrire comme ceci

.touMingDiv{  
    filter:Alpha(opacity=60);  
    opacity:0.6;  
}

Mais après avoir testé, nous avons constaté que non seulement le div le conteneur est translucide Oui, même le texte et les images à l'intérieur du div sont rendus transparents. Cet effet se produit car les propriétés de ces filtres ont été héritées des éléments enfants.

Nous pouvons utiliser la méthode suivante pour y parvenir

.touMingDiv{  
    width:800px;  
    min-height:300px;  
    color:#fff;  
    background:rgba(0,0,0,0.6);  
    background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
    filter:Alpha(opacity=60);/*只对ie7,ie8有效*/  
}  
.touMingDiv p,  
.touMingDiv div,  
.touMingDiv img{  
    position:relative;  
    /*或者是absolute，都可以使文字不透明，这样做还是为了  
    兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/  
}

Notez que le background ci-dessus :rgba(0,0,0,0.6); Chrome ...etc. sont valides, à l'exclusion de ie6, ie7, ie8, nous avons donc ces lignes de code :

background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/  
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/

De plus, nous devons définir les attributs relatifs ou absolus sur les éléments enfants, afin que l'arrière-plan puisse apparaître transparent. Le texte et les images sur l'arrière-plan s'affichent normalement.

Mais le code ici n'est certainement pas adapté à ie6. Il est recommandé d'utiliser des images png pour ie6, puis d'utiliser js pour le traiter.

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!