这次要用纯CSS做一个波点背景,先上图看看效果。
我把这个效果写在 body
上,如果你不喜欢这个配色也可以自己手动改改。\n\n
\n
\n\n# 思路\n\n我实现上图的效果思路是,最先想到使用 background-image
,然后使用 radial-gradient
画圆。再配合默认给个背景色,应该差不多可以了。\n\n需要提醒一下,background-image
不单只能插背景图,也可以通过代码实现渐变效果(之前遇到一些实习生不清楚这点~)。\n\n于是我做了这几步:\n\n1. 将body的宽高设为 100%
\n1. 将 margin
设为 0
\n1. 设置默认背景色 background-color
\n1. 设置圆形背景 background-image: radial-gradient
\n\n于是代码变成这样\n\n\n<style>\n body {\n width: 100%;\n height: 100%;\n margin: 0;\n background-color: #655;\n background-image: radial-gradient(#f5dab8 30%, transparent 0);\n background-size: 60px 60px;\n }\n</style>\n
\n\n\n
我使用 background-size
设置波点的大小。你可以根据自己项目实际需求来设置。\n\n是有一点效果了,但此时的波点是横竖有序排列的。我希望这些波点能错开排列。\n\n于是我又想到,可以做多一层波点,然后使用 background-position
将2层波点错开排列。\n\n为了让错开排列后还是保持着整齐的感觉,所以我用的技巧是错开的距离是波点的一半大小。\n\n也就是说,background-position = background-size / 2
。当然,这句是伪代码。\n\n改进后的代码添加了两句:\n/* 省略部分代码 */\nbackground-image:\n radial-gradient(#f5dab8 30%, transparent 0),\n radial-gradient(#f5dab8 30%, transparent 0);\nbackground-size: 60px 60px;\nbackground-position: 0 0, 30px 30px;\nbackground-image
里有2层 radial-gradient
,background-position
也分别设置了每一层的位置。\n\n最终效果如下所示\n\n\n
完整代码\n<style>\n body {\n width: 100%;\n height: 100%;\n margin: 0;\n background-color: #655;\n background-image:\n radial-gradient(#f5dab8 30%, transparent 0),\n radial-gradient(#f5dab8 30%, transparent 0);\n background-size: 60px 60px;\n background-position: 0 0, 30px 30px;\n }\n</style>\n