ps做字幕模板下载网站,wordpress新建界面,织梦培训机构网站模板,购物网站 设计前置知识#xff1a;CSS 渐变#xff0c;5. 条纹背景#xff0c;6. 复杂的背景图案 前言
本篇主要内容依然是关于背景的#xff0c;无限平铺的背景会显得整齐美观#xff0c;但又有些呆板#xff0c;如何实现背景的多样性和随机性#xff0c;是本篇的核心。
一、四种颜… 前置知识CSS 渐变5. 条纹背景6. 复杂的背景图案 前言
本篇主要内容依然是关于背景的无限平铺的背景会显得整齐美观但又有些呆板如何实现背景的多样性和随机性是本篇的核心。
一、四种颜色的条纹图案
首先我们用4条不同宽度颜色的条纹来平铺一个背景初步模拟背景条纹的随机性。 background: linear-gradient(90deg, #fb3 15%, #655 0, #655 40%, #ab4 0, #ab4 65%, hsl(20, 40%, 90%) 0);background-size: 80px 100%; width: 400px;height: 200px乍一看这些条纹已经具备了一些随机性的视觉效果但是也很明显能看出每80px图片就会开始重复这个规律很容易被发现。
二、更高的随机性
我们以四种颜色中的其中一个为底色其他三种颜色作为条纹。 再将三个条纹以不同的间隔进行平铺就可以得到更加”随机“的条纹背景。
background: hsl(20, 40%, 90%);
background-image:linear-gradient(90deg, #fb3 10px, transparent 0),linear-gradient(90deg, #ab4 20px, transparent 0),linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;如果不标记出来我们目前应该比较难去分辨出平铺的图案连接处了。 如上代码我们将三个条纹分别以 80px 60px 40px 的宽度平铺在纯色背景上相当于三张不同尺寸图片平铺叠加在一起。那么如果我们想找到每次重复起始的点其实就是找到 80 60 40 的最小公倍数。 为了便于理解我将各条纹图片拆分出来
背景background: hsl(20, 40%, 90%);条纹一橙色条纹以 10px 的宽度80 - 1070px 的间距 平铺。
background-image: linear-gradient(90deg, #fb3 10px, transparent 0);
background-size: 80px 100%; 条纹二 绿色条纹以 20px 的宽度60 - 2040px 的间距 平铺。
background-image: linear-gradient(90deg, #ab4 20px, transparent 0);
background-size: 60px 100%;条纹三 棕色条纹以 20px 的宽度40 - 2020px 的间距 平铺。
background-image: linear-gradient(90deg, #655 20px, transparent 0);
background-size: 40px 100%;小结
根据我们上面实践的方法我们可以发现平铺的图片越大越难以被发现重复性。那么根据我们得出平铺图片的起点是根据三者的最小公倍数得来的可以得出我们需要给出的3个条纹尺寸最好都是质数只有质数之间的最小公倍数最大这样可以更容易让平铺的图片变大。
相关阅读
CSS揭秘1.半透明边框CSS揭秘2.多重边框CSS揭秘3.灵活的背景定位CSS揭秘4.边框内圆角CSS揭秘5.条纹背景上CSS揭秘5.条纹背景下CSS揭秘6.复杂的背景图案上CSS揭秘6.复杂的背景图案下
