Maison > interface Web > tutoriel HTML > Exemple détaillé de dégradé de couleur d'arrière-plan HTML implémenté via CSS

Exemple détaillé de dégradé de couleur d'arrière-plan HTML implémenté via CSS

高洛峰
Libérer: 2017-03-06 16:29:24
original
1595 Les gens l'ont consulté

Le dégradé de couleur d'arrière-plan HTML que vous voyez est obtenu grâce à CSS. Personnellement, je pense qu'il est plutôt bon et vous pouvez voir clairement l'image. Capture d'écran de l'effet :
Exemple détaillé de dégradé de couleur darrière-plan HTML implémenté via CSS
Code d'implémentation :

Le code est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.linear{ 
width:100%; 
height:600px; 
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/ 
background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/ 
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/ 
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #15A216),color-stop(1, #fafafa));/* Safari & Chrome*/ 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=&#39;#15A216&#39;, endColorstr=&#39;#fafafa&#39;); /*IE6 & IE7*/ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=&#39;#15A216&#39;, endColorstr=&#39;#fafafa&#39;)"; /* IE8 */ 
} 
</style> 
</head> 
<body> 
<p class="linear"></p> 
</body> 
</html>
Copier après la connexion

Exemples plus détaillés de dégradé de couleur d'arrière-plan HTML implémenté via CSS sont liés. Veuillez faire attention aux articles sur le site Web chinois de PHP !

É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