本文简介
你负责点赞,我负责更新~
这次要用纯 CSS 做一个波点背景,先上图看看成果。
我把这个成果写在 body
上,如果你不喜爱这个配色也能够本人手动改改。
思路
我实现上图的成果思路是,最先想到应用 background-image
,而后应用 radial-gradient
画圆。再配合默认给个背景色,应该差不多能够了。
须要揭示一下,background-image
不单只能插背景图,也能够通过代码实现突变成果(之前遇到一些实习生不分明这点~)。
于是我做了这几步:
- 将 body 的宽高设为
100%
- 将
margin
设为0
- 设置默认背景色
background-color
- 设置圆形背景
background-image: radial-gradient
于是代码变成这样
<style>
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #655;
background-image: radial-gradient(#f5dab8 30%, transparent 0);
background-size: 60px 60px;
}
</style>
我应用 background-size
设置波点的大小。你能够依据本人我的项目理论需要来设置。
是有一点成果了,但此时的波点是横竖有序排列的。我心愿这些波点能错开排列。
于是我又想到,能够做多一层波点,而后应用 background-position
将 2 层波点错开排列。
为了让错开排列后还是放弃着参差的感觉,所以我用的技巧是错开的间隔是波点的一半大小。
也就是说,background-position = background-size / 2
。当然,这句是伪代码。
改良后的代码增加了两句:
/* 省略局部代码 */
background-image:
radial-gradient(#f5dab8 30%, transparent 0),
radial-gradient(#f5dab8 30%, transparent 0);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-image
里有 2 层 radial-gradient
,background-position
也别离设置了每一层的地位。
最终成果如下所示
残缺代码
<style>
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #655;
background-image:
radial-gradient(#f5dab8 30%, transparent 0),
radial-gradient(#f5dab8 30%, transparent 0);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
</style>
举荐浏览
👍《纯 CSS 红砖背景墙》
👍《CSS 里的 ch 到底是什么货色?》
👍《纯 CSS:动静突变背景【一分钟学会】》
👍《纯 css 实现 117 个 Loading 成果》
👍《纯 CSS 实现『斑马纹理投影文字』》
👍《如何用 CSS 选择符干掉队友》
👍《这 18 个网站能让你的页面背景炫酷起来》
点赞 + 关注 + 珍藏 = 学会了
点赞 + 关注 + 珍藏 = 学会了