Home > Web Front-end > HTML Tutorial > Detailed example of html background color gradient implemented through CSS

Detailed example of html background color gradient implemented through CSS

高洛峰
Release: 2017-03-06 16:29:24
Original
1600 people have browsed it

The html background color gradient you see is achieved through CSS. I personally feel it is pretty good and you can clearly see the picture. Screenshot of the effect:
Detailed example of html background color gradient implemented through CSS
Implementation code:

The code is as follows:

<!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>
Copy after login

For more detailed examples of html background color gradient implemented through CSS, please refer to related articles. Follow PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template