CSS：三种背景（斑马线，棋盘，格子）

一，斑马线背景

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>CSS 斑马线效果</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  body{
  background-image:-webkit-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent);
  background-image:-moz-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent);
  background-image:-o-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent);
  background-image:linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
  background-size:10% 100%;
  }
  </style>
 </head>
 <body>
  这是使用CSS3的斑马线效果。
 <pre>




  注意：IE9- 看不到效果。
  在低版本IE中，请使用背景图片实现功能。
  在IE9下可以使用filter滤镜实现渐变部分。
  </pre>
 </body>
</html>

二，棋盘背景

效果:

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>CSS 棋盘背景</title>
  <style type="text/css">
  body {
  	background-image: linear-gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0), 
    linear-gradient(45deg, #E1DEB0 26%, transparent 26%, transparent 74%, #E1DEB0 74%, #E1DEB0);
    background-image: -webkit-linear-gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0), 
    -webkit-linear-gradient(45deg, #E1DEB0 26%, transparent 26%, transparent 74%, #E1DEB0 74%, #E1DEB0);
	background-image: -moz-linear-gradient(45deg, #E1DEB0 24%, transparent 24%, transparent 76%, #E1DEB0 76%, #E1DEB0), 
    -moz-linear-gradient(45deg, #E1DEB0 26%, transparent 26%, transparent 74%, #E1DEB0 74%, #E1DEB0);
    background-image: -o-linear-gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0), 
    -o-linear-gradient(45deg, #E1DEB0 25%, transparent 25%, transparent 75%, #E1DEB0 75%, #E1DEB0);
    background-size: 100px 100px;
    background-position: 0 0, 50px 50px;
}
  </style>
 </head>
 <body>
  注意修复当背景颜色不是黑白相间时的在IE、Firefox、Safari下的bug
 </body>
</html>

三，格子背景（不均匀的棋盘背景）

效果：

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>一种CSS格子背景</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  body{
  background-image:-webkit-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
  -webkit-linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
  background-image:-moz-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
  -moz-linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
  background-image:-o-linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
  -o-linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
  background-image:linear-gradient(0deg,#E1DEB0 50%,transparent 50%,transparent),
  linear-gradient(90deg,#E1DEB0 50%,transparent 50%,transparent);
  background-size:100px 100px;
  }
  </style>
 </head>
 <body>
  这是CSS格子背景。
 </body>
</html>

CSS：三种背景（斑马线，棋盘，格子）

一，斑马线背景

二，棋盘背景

三，格子背景（不均匀的棋盘背景）

猜你喜欢