admin 管理员组

文章数量: 1087131

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三种背景（斑马线，棋盘，格子）

版权声明：本文标题：CSS：三种背景（斑马线，棋盘，格子） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1688088715a177878.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。