CSS揭秘——复杂的背景图案

·  阅读 116

除了条纹图案,还会有很多其他不同类型的图案,如网格、波点、棋盘等。

几乎可以使用 CSS 创建任何种类的几何图案,只不过有时这样不太实际。在 CSS 图案的实现就可以用 CSS 预处理器来减少代码量,CSS 图案一不注意就会写特别多的代码,图案越复杂,代码量就会越大。

网格

epub_26211795_108.jfif

在把多个渐变图案组合起来,通过彼此的透明区域去显现,就可以看到这些图案叠加起来了。像把水平和垂直的条纹叠加,就能得到各种各样的网格效果。

background: white;
background-image:   linear-gradient(90deg, rgba(200,0,0,0.5) 50%, transparent 0),
                    linear-gradient(rgba(200,0,0,0.5) 50%, transparent 0);
background-size: 30px 30px;
复制代码

epub_26211795_109.jfif

但是这种方式在改动每个格子大小时,网格线的宽度是设置的百分比,也会随之变化,而在某些情况,我们是希望这个网格线的粗细是可以保持固定。像图纸辅助线的网格就是这样,使用长度而不是百分比作为色标。

background: #58a;
background-image:   linear-gradient(90deg, white 1px, trans
parent 0),
                    linear-gradient(white 1px, transparent 0);
background-size: 30px 30px;
复制代码

2.png

3.png

如此一来就可以改变 background-size 来设置单元格的大小。

epub_26211795_110.jfif

甚至可以把两幅不同线宽、不同颜色的网格叠加起来:

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;
复制代码

可以看出效果更佳逼真。

波点

epub_26211795_111.jfif

除了线性渐变,径向渐变同样很实用,可以用来创建圆形、椭圆,像最简单的圆点阵列:

background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
复制代码

epub_26211795_112.jfif

这个离波点展示就差一点,需要我们再多叠加一层径向渐变即可:

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;
复制代码

这里指的注意的是 background-position 位置设置,第二层背景的位置必须是贴片大小的一半。

棋盘

棋盘图案是一种比较常用的效果,可以通过平铺生成,可以看出每个贴片包含两种不同的颜色。看似简单的创建两个不同位置的方块就可以实现,实际上用渐变来创建的平铺方块是不会有间隙的,所以效果只会是实色。也就是没办法用一层渐变实现有空隙的方块。

这里我们用的技巧就是用两个直角三角形来拼合出一个方块。

7.png

background: #eee;
background-image: linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;
复制代码

这是一个直角三角形的效果,但是可以看出这个直角边宽度只需要一半,只需要把 50% 改为 25% 即可:

19.png

background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0);
background-size: 30px 30px;
复制代码

8.png

而得到反向的直角三角形可以把色标的顺序切换一下:

background: #eee;
background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
复制代码

或者直接改变角度:

background: #eee;
background-image: linear-gradient(-135deg, #bbb 25%, transparent 0);
background-size: 30px 30px;
复制代码

可以得到一样的效果。然后把这两个组合到一起:

9.png

background: #eee;
background-image:   linear-gradient(45deg, #bbb 25%, transparent 0),
                    linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
复制代码

这个效果并不是我们想要的,这个时候就需要调整第二层渐变位置,需要把第二层渐变在水平和垂直方向均移动贴片长度的一半:

10.png

background: #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;
复制代码

这个就是我们想要实现的小方块,但现在贴片里面只有一半,我们需要再把这组渐变复制一份,进行位置偏移,得到另一半效果:

11.png

epub_26211795_115.jfif

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-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 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-position: 0 0, 15px 15px;
background-size: 30px 30px;
复制代码

这样已经从四层渐变简化成两层,但是代码在尺寸修改,主色调的修改,还是需要四个地方,再做简化,就需要引入预处理器。

还可以用 SVG 去实现:

16.png

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity="0.25">
    <rect x="50" width="50" height="50" />
    <rect y="50" width="50" height="50" />
</svg>
复制代码

这个可以看到就是一个贴片的效果,然后在背景中去使用:

background: #eee url('data: image/svg+xml, \
    <svg xmlns="http://www.w3.org/2000/svg" \
        width="100" height="100" fill-opacity="0.25"> \
    <rect x="50" width="50" height="50" /> \
    <rect y="50" width="50" height="50" /> \
</svg>');
background-size: 30px 30px;
复制代码

可以看到使用这种方法在颜色改变时,只需要改动一个地方,尺寸也只需要改两处。

除了以上方法,在 CSS图像(第四版) 定义了一种新的渐变形式,可以生成角向渐变,也称作圆锥渐变。

生成方式是把所有色标的颜色按一条射线绕着端点旋转出来,可以创建一个色轮来看这个效果:

17.png

background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
复制代码

除了色轮,角向渐变还有很多地方可以用到,放射状的光芒、金属拉丝效果等等,当然也包括现在想要实现的棋盘效果:

background: repeating-conic-gradient(#bbb 0, #bbb 25%, #eee 0, #eee 50%);
background-size: 30px 30px;
复制代码

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端!!!!! 欢迎大家来聊,有意向可发送简历到 chen_zhen@dahuatech.com,加入我们,可以一起进步,一起聚餐,一起旅游,让我们从世界村的小伙伴变成大华村的小伙伴。

分类:
前端
标签:
分类:
前端
标签: