css3实现条纹背景

<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'/>
<meta forua="true" http-equiv="Cache-Control" content="no-cache,must-revalidate,max-age=0, proxy-revalidate, s-maxage=0"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>背景</title>
<style type="text/css">
body,html{ 100%; height: 100%; margin:0 auto; height: 100%;}
.bg{height:100%; padding:0; 100%; overflow:hidden; position:relative; background-color: #fffcf9;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, #f7f4f1),
color-stop(.5, #f7f4f1), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, #f7f4f1),
to(#f7f4f1));
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, #f7f4f1 25%,
#f7f4f1 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, #f7f4f1);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, #f7f4f1 25%,
#f7f4f1 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
#f7f4f1 75%, #f7f4f1);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, #f7f4f1 25%,
#f7f4f1 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
#f7f4f1 75%, #f7f4f1);}
.stripes {
overflow:hidden;
100%;
/*padding:2%;*/
height: 100%;
float: left;
-webkit-background-size: 8px 8px;
-moz-background-size: 8px 8px;
background-size: 8px 8px; /* 控制条纹的大小 */
}
</style>
</head>

<body>
<div class="bg stripes">

</div>
</body>
</html>

原文地址:https://www.cnblogs.com/xiaotaiyang/p/4806401.html