本文共 3353 字,大约阅读时间需要 11 分钟。
复杂背景图案笔记
复杂背景图案
网格
把水平条纹与垂直条纹叠加起来就能得到各种样式的网格:
.box1{ width: calc(210px - 15px); height: calc(210px - 15px); 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;}
在一些情况下,我们希望每个格子的大小可以调整,而网格线的粗细可以调整:
.box2{ margin: 20px; width: 200px; height: 200px; background: #58a; background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px,transparent 0); background-size: 30px 30px;}
我们甚至可以把两幅不同线宽、不同颜色的网格叠加起来,得到更加逼真的蓝图网格:
.box3{ margin: 20px; width:200px; height: 200px; background: #58a; background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px,transparent 0), linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0), linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0); background-size: 100% 75px ,75px 100%, 100% 15px, 15px 100%;}
波点
径向渐变允许我们创建圆形、椭圆或是它们中的一部分,能够创建的最简单图案是圆点的阵列:
.box4{ width: 100px; height: 100px; background: #655; background-image: radial-gradient(tan 30%,transparent 0); background-size: 30px 30px;}
然而此时生成的波点还不够实用,可以生成两层圆点阵列图案,并把它们错开。
.box5{ margin: 10px; width: 100px; height: 100px; 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;
棋盘图案
我们可以利用两个45度线性渐变形成的三角形图案拼合形成小正方形形状的背景:
.box5{ margin: 10px; width: 100px; height: 100px; 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;}
第二层渐变的位置值之所以是75%,是因为小三角形占据大方块的四分之一,而其余均为大方块的背景色,又用于线性渐变从底往上,所以首先要设定透明背景色。
此时尚未到达我们想要的效果,只需将第二层渐变在水平和垂直方向均移动贴片长度的一半,就可以将它们拼合成完整的方块:
.box7{ margin: 10px; width: 100px; height: 100px; background-color: #eee; background-image: linear-gradient(45deg,#bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%, #bbb 0); background-position: 0 0,15px 15px; background-size: 30px 30px;}
可以看到两个小三角形之间依然存在着空隙,可以稍稍调整三角形颜色的位置值(transparent
前的参数`)。
但实际上这依然只是我们想要的棋盘效果的一半,这时我们可以根据这一半的效果复刻出另一半,只需要稍稍调整它的背景位置值background-position
。
.box8{ margin: 10px; width: 120px; height: 120px; background-color: #eee; background-image: linear-gradient(45deg,#bbb 25%, transparent 0), linear-gradient(45deg, transparent 74%, #bbb 0), linear-gradient(45deg, #bbb 25%, transparent 0), linear-gradient(45deg, transparent 75%,#bbb 0); background-position: 0 0, 15px 15px, 15px 15px, 30px 30px; background-size: 30px 30px;}
当你看到这个效果形成的小正方形左上角并不是(0,0),可能会对background-position
从(0,0)开始感到疑惑,因为这是background-position
决定的是整个背景的起始位置,而由于线性渐变默认从底部网上,所以(0,0)是属于线性渐变透明色的,而灰色则处于背景的底部。
这个代码还可以进行优化,比如把处在贴片顶角的三角形两两组合起来(即把第一组和第二组合并成一层渐变,把第三组和第四组合并成一组渐变),然后还可以把深灰色改成半透明的黑色,这样只需修改底色就能改变整个棋盘的色调。
.box9{ width: 100px; height: 100px; margin: 10px; background: #eee; background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0, transparent 76%, rgba(0,0,0,.25) 0), linear-gradient(45deg, rgba(0,0,0,.25) 25%,transparent 0, transparent 74%, rgba(0,0,0,.25) 0); background-position: 0 0, 15px 15px; background-size: 30px 30px;}
本文内容是《css揭秘》一书的笔记,
如果侵犯到原著作者的权益,请联系我删除。
转载地址:https://blog.csdn.net/PeZXO/article/details/106164888 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!