我们知道CSS3能实现好看的渐变色背景，实际上它还可以实现更复杂的背景，比如条纹斑马线、棋盘、网格等，下面我们就来贴出代码，希望能为大家提供思路和帮助。

细线网格背景

.container{

background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%),linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);

background-size: 10px 10px;

width: 600px;

height: 300px;

}

斑马线背景(条纹)html>

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%;

}

这是使用CSS3的斑马线效果。

注意：IE9- 看不到效果。

在低版本IE中，请使用背景图片实现功能。

在IE9下可以使用filter滤镜实现渐变部分。

棋盘背景html>

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;

}

注意修复当背景颜色不是黑白相间时的在IE、Firefox、Safari下的bug

格子背景(不均匀的棋盘背景)html>

一种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;

}

这是CSS格子背景。

从以上实例中我们可以看出，主要用到了CSS3中的background-image，background-size，background-position等属性。