Heim > Web-Frontend > HTML-Tutorial > Detailliertes Beispiel eines über CSS implementierten HTML-Hintergrundfarbverlaufs

Detailliertes Beispiel eines über CSS implementierten HTML-Hintergrundfarbverlaufs

高洛峰
Freigeben: 2017-03-06 16:29:24
Original
1599 Leute haben es durchsucht

Der HTML-Hintergrundfarbverlauf, den Sie sehen, wird durch CSS erreicht. Ich persönlich finde ihn ziemlich gut und Sie können das Bild deutlich sehen. Screenshot des Effekts:
Detailliertes Beispiel eines über CSS implementierten HTML-Hintergrundfarbverlaufs
Implementierungscode:

Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Detailliertere Beispiele für den implementierten HTML-Hintergrundfarbverlauf durch CSS sind verwandt. Bitte beachten Sie die PHP-Chinese-Website für Artikel!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage