CSS3实现斑马线、棋盘、格子复杂背景

2020年09月30日 06:01:23益点益滴358

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

细线网格背景

<style>
.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;
}
</style>
<div class="container"></div>

斑马线背景(条纹)

<!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>

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

超赞,真给力!嗯,必须鼓励~

打赏 1

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]