《css揭秘》笔记(六),复杂背景图案
发布日期:2022-02-15 02:36:19 浏览次数:1 分类:技术文章

本文共 3247 字,大约阅读时间需要 10 分钟。

复杂背景图案笔记

复杂背景图案

网格

把水平条纹与垂直条纹叠加起来就能得到各种样式的网格:

.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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YhIrzYZB-1589633106794)(2背景边框/img/25.png)]

在一些情况下,我们希望每个格子的大小可以调整,而网格线的粗细可以调整:

.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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GcDIBLXX-1589633106800)(2背景边框/img/26.png)]

我们甚至可以把两幅不同线宽、不同颜色的网格叠加起来,得到更加逼真的蓝图网格:

.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%;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EuUvEBHG-1589633106803)(2背景边框/img/27.png)]

波点

径向渐变允许我们创建圆形、椭圆或是它们中的一部分,能够创建的最简单图案是圆点的阵列:

.box4{

 width: 100px;  height: 100px;  background: #655;  background-image: radial-gradient(tan 30%,transparent 0);  background-size: 30px 30px;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNl10Y4d-1589633106815)(2背景边框/img/28.png)]

然而此时生成的波点还不够实用,可以生成两层圆点阵列图案,并把它们错开。

.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;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8gUkFisr-1589633106820)(2背景边框/img/29.png)]

棋盘图案

我们可以利用两个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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aPWAfIFl-1589633106823)(2背景边框/img/30.png)]

第二层渐变的位置值之所以是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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IUkwmzvT-1589633106824)(2背景边框/img/31.png)]

可以看到两个小三角形之间依然存在着空隙,可以稍稍调整三角形颜色的位置值(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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dmNZu7Dg-1589633106826)(2背景边框/img/32.png)]

当你看到这个效果形成的小正方形左上角并不是(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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:TensorFlow学习——张量运算
下一篇:《css揭秘》笔记(七), 各种各样的椭圆

发表评论

最新留言

网站不错 人气很旺了 加油
[***.36.148.135]2022年08月02日 18时24分17秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章