Comment définir la transparence du calque d'arrière-plan en CSS

CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, prend en charge presque tous les styles de taille de police et a la capacité de modifier les objets de page Web et les styles de modèle. Si vous devez définir l'arrière-plan d'un certain calque pour qu'il soit transparent en HTML, comment devez-vous le définir ? Partageons comment utiliser CSS pour définir un effet de calque transparent. Cette méthode est compatible avec tous les navigateurs.

Voici le code spécifique (l'effet ci-dessus est réglé sur 0,8) :

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

Jetons un coup d'œil à l'effet :

Voici quelques explications supplémentaires pour le code CSS ci-dessus :

opacity:0.5; Cet attribut est actuellement l'attribut standard pour définir la transparence en CSS. Fonctionne avec la plupart des versions de navigateurs tels que Firefox, Safari et Opera.

filter:alpha(opacity=50); Cet attribut ne prend en charge que le navigateur IE.

-moz-opacity:0.5; Cet attribut est destiné à la compatibilité ascendante avec certains anciens navigateurs Mozilla, tels que Netscape Navigator.

-khtml-opacity : 0.5; Cet attribut est destiné à la compatibilité avec les anciennes versions de Safari (1.x), qui utilise un moteur de rendu encore appelé KTHML, par rapport au WebKit actuel.

Le contenu ci-dessus explique comment définir l'effet de calque transparent en CSS. J'espère que cela sera utile à tout le monde.

Recommandations associées :

Comment définir la transparence en CSS

Exemple de démonstration de la façon de créer des triangles transparents en utilisant du nouveau contenu en CSS3

Exemples détaillés d'attributs transparents ccs et de méthodes d'héritage de transparence d'arrière-plan

Exemple d'analyse CSS sur la façon de définir le style transparent d'arrière-plan div

Un exemple de tutoriel sur la définition de la couleur d'arrière-plan sur transparent

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!