Maison > interface Web > tutoriel CSS > Code complet pour implémenter l'opacité CSS3

Code complet pour implémenter l'opacité CSS3

高洛峰
Libérer: 2017-03-20 10:45:28
original
2720 Les gens l'ont consulté

Comment définir la transparence ? Définissez l'attribut d'opacité. En définissant cet attribut, n'importe quel élément peut être rendu semi-transparent. La syntaxe de base de l'attribut d'opacité est la suivante :

|inherit

prend Description de la valeur :

1. | est une valeur de longueur composée d'un nombre à virgule flottante et d'un identifiant d'unité. Il ne peut pas s'agir d'une valeur négative et la valeur par défaut est 1. Lorsque la valeur d'opacité est 1, l'élément est complètement opaque ; à l'inverse, lorsque la valeur est 0, l'élément est complètement transparent et invisible.

2. Hériter signifie héritage, c'est-à-dire hériter de l'opacité de l'élément parent.

3. Pour le navigateur IE, vous pouvez utiliser son filtre d'attribut privé pour être compatible : filter: alpha (alpha=value) ;.

Exemple : Conception d'un tissu de fond publicitaire pour caisson lumineux

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>opacity</title>  
<style type="text/css">  
body {   
    margin:0;   
    padding:0;   
}   
p { position:absolute; }   
.bg {   
    width:100%;   
    height:100%;   
    background:#000;   
    opacity:0.7;   
    filter:alpha(opacity=70);   
}   
.lightbox {   
    left:50px;   
    top:50px;   
}   
</style>  
</head>  
  
<body>  
<p class="web"><img  src="images/web_bg_9.jpg"    style="max-width:90%"  style="max-width:90%" / alt="Code complet pour implémenter l'opacité CSS3" ></p>  
<p class="bg"></p>  
<p class="lightbox"><img  src="images/web_bg_10.png"    style="max-width:90%" / alt="Code complet pour implémenter l'opacité CSS3" ></p>  
</body>
Copier après la connexion
Rendu de démonstration :

Code complet pour implémenter lopacité CSS3

Articles connexes :

CSS pour rendre un élément translucide

Tutoriel CSS3 (8) : Guide de transparence CSS3

CSS3 Un exemple d'utilisation de RGBa pour ajuster la transparence

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal