css网格背景效果
时间：6年前 阅读：5642
1、【桌布效果】
把多个渐变图案组合起来，让它们透过彼此的透明区域显现时，就会形成各种网格。例如，把水平和垂直的条纹叠加起来，得到桌布图案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cc{
width: 200px;
height: 70px;
background: white;
background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 0),linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
}
</style>
</head>
<body>
<div class="cc"></div>
</body>
</html>
2、【图纸辅助线】
某些情况下，希望网格中每个格子的大小可以调整，而网格线条的粗细同时保持固定。例如，类似图纸辅助线的网格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cc{
width: 200px;
height: 70px;
background: #58a;
background-image: linear-gradient(90deg,white 1px, transparent 0),linear-gradient(white 1px, transparent 0);
background-size: 30px 30px;
}
</style>
</head>
<body>
<div class="cc"></div>
</body>
</html>
3、【蓝图网格】
甚至可以把两幅不同线宽、不同颜色的网格图案叠加起来，得到一个更加逼真的蓝图网格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cc{
width: 200px;
height: 70px;
background: #58a;
background-image: linear-gradient(90deg,white 2px, transparent 0),linear-gradient(white 2px, transparent 0),linear-gradient(90deg,hsla(0,0%,100%,0.3) 1px, transparent 0),linear-gradient(hsla(0,0%,100%,0.3) 1px, transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;
}
</style>
</head>
<body>
<div class="cc"></div>
</body>
</html>
4、波点背景
【圆点阵列】
前面，一直在用线性渐变生成图案。但是，径向渐变同样也是非常实用的，因为它允许创建圆形、椭圆，或是它们的一部分。径向渐变能够创建的最简单的图案是圆点阵列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cc{
width: 200px;
height: 70px;
background: #655;
background-image: radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
}
</style>
</head>
<body>
<div class="cc"></div>
</body>
</html>
【波点图案】
可以生成两层圆点阵列图案，并把它们的背景定位错开，这样就可以得到真正的波点图案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cc{
width: 200px;
height: 70px;
background: #655;
background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
background-position: 0 0 ,15px 15px;
}
</style>
</head>
<body>
<div class="cc"></div>
</body>
</html>
棋盘背景
棋盘图案在很多场景下都会用到。比如说，相对于单调的纯色背景来说，具有细微对比度的棋盘图案可能就是一个有趣的替代品。在各种应用程序的界面中，灰色的棋盘图案已经是用于表示透明色的事实标准
css
background:#eee; background-image: linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0),linear-gradient(45deg,transparent 75%,#bbb 0); background-size: 30px 30px; background-position: 0 0 ,15px 15px,15px 15px,30px 30px;
这段代码还可以稍稍优化，可以把这些处在贴片顶角的三角形两两组合起来(即把第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变)，然后还可以把深灰色改成半透明的黑色——这样只需要修改底色就可以改变整个棋盘的色调，不需要单独调整各层渐变的色标了
background:#eee; background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0); background-size: 30px 30px; background-position: 0 0 ,15px 15px;
下面来使用SASS的mixin来简化代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cc{
width: 200px;
height: 70px;
background: #eee;
background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0);
background-size: 30px 30px;
background-position: 0 0 ,15px 15px;
}
</style>
</head>
<body>
<div class="cc"></div>
</body>
</html>
【SVG】
这样的代码量不能算少，所以转到SVG方案可能是更好的选择
可能有人会说，CSS渐变可以节省HTTP请求。但实际上，可以把SVG文件以dataURL的方式内嵌到样式表中
[注意]SVG中的标签的属性值一定要添加引号，否则通过dataURL的方式引入的SVG文件无法显示成功
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cc{
height: 100px;
width: 100px;
background: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">\
<defs>\
<pattern id="pattern1" width="0.2" height="0.2" >\
<rect x="10" width="10" height="10"/>\
<rect y="10" width="10" height="10"/>\
</pattern>]\
</defs>\
<rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)"/>\
</svg>');
}
</style>
</head>
<body>
<div class="cc">
<svg xmlns="http//www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25">
<defs>
<pattern id="pattern1" width=0.2 height=0.2 >
<rect x="10" width="10" height="10"/>
<rect y="10" width="10" height="10"/>
</pattern>
</defs>
<rect id="rect1" x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
</svg>
</div>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论