Maison  >  Article  >  interface Web  >  Comment définir la transparence de l'arrière-plan en CSS

Comment définir la transparence de l'arrière-plan en CSS

coldplay.xixi
coldplay.xixioriginal
2021-03-01 16:29:1531949parcourir

Comment définir la transparence de l'arrière-plan en CSS : créez d'abord la balise [

] et ajoutez une classe dans la balise [] puis définissez la hauteur et la classe rgba dans la balise [] Balise Style de transparence d'arrière-plan [(rgba(R,G,B,A))].

Comment définir la transparence de l'arrière-plan en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version css3, ordinateur DELL G3. Cette méthode convient à toutes les marques d'ordinateurs.

Comment définir la transparence de l'arrière-plan en CSS :

1. Créez un fichier html. Comme le montre la figure

Comment définir la transparence de larrière-plan en CSS

2. Recherchez une balise dans le fichier html, créez une balise <div> dans cette balise et ajoutez une classe, et définissez-la classez ici pour : rgba. Comme le montre la figure <p> Code : </p><pre class="brush:php;toolbar:false">&lt;div class=&quot;rgba&quot;&gt;&lt;/div&gt;</pre><p><img src="https://img.php.cn/upload/image/208/928/758/1614587277342859.png" title="1614587277342859.png" alt="Comment définir la transparence de larrière-plan en CSS"></p> <p> 3. Ajoutez des styles au div. Créez un <code><style></style> après la balise

et définissez les styles de hauteur de classe rgba et de transparence d'arrière-plan <code>(rgba(R,G,B,A))</code> dans la balise <style> Paramètre de transparence, la valeur est comprise entre 0 et 1, et ne peut pas être négative. Plus le paramètre de transparence est petit, plus la transparence est élevée. Comme indiqué sur l'image <p> Code : <pre class="brush:php;toolbar:false"><style type="text/css"> .rgba{ background-color: rgba(0,0,0,0.5); height: 200px; } </style></pre><p><img src="https://img.php.cn/upload/image/919/265/675/1614587283492815.png" title="1614587283492815.png" alt="Comment définir la transparence de larrière-plan en CSS"/><p> 4. Utilisez le navigateur pour afficher après l'enregistrement. Vous pouvez voir que lorsque la transparence passe de 0,1 à 1, l'arrière-plan du div passe du gris au noir. Comme le montre l'image : <p><img src="https://img.php.cn/upload/image/496/458/463/1614587288571362.png" title="1614587288571362.png" alt="Comment définir la transparence de larrière-plan en CSS"/><p><img src="https://img.php.cn/upload/image/984/894/870/1614587295311922.png" title="1614587295311922.png" alt="Comment définir la transparence de larrière-plan en CSS"/><p><img src="https://img.php.cn/upload/image/801/601/562/1614587301589695.png" title="1614587301589695.png" alt="Comment définir la transparence de larrière-plan en CSS"/><blockquote><p><strong> Tutoriels recommandés : <a href="http://www.php.cn/course/list/12.html" target="_blank"><strong>Tutoriel vidéo CSS</style>

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!

Déclaration:
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
Article précédent:Comment définir une image sur une image circulaire en CSSArticle suivant:Comment définir une image sur une image circulaire en CSS

Articles Liés

Voir plus