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

本文共 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;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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揭秘》笔记(七), 各种各样的椭圆

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年03月03日 12时10分17秒

关于作者

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

推荐文章

java接口的理解_Java接口的理解 - rabbit_mom的个人空间 - OSCHINA - 中文开源技术交流社区... 2019-04-21
java重用名快捷键_Eclipse 最常用的 10 组快捷键,个个牛逼! 2019-04-21
java中类加载根路径_java中获取类加载路径和项目根路径的5种方法 2019-04-21
Java套接字传文件_Java通过套接字传输多个文件 2019-04-21
递归字符串逆序 java_在Java中使用递归反转字符串 2019-04-21
java推送功能实现原理图_IOS 基于APNS消息推送原理与实现(JAVA后台) - 图文 2019-04-21
java streamencoder_[求助]关于apcche与tomcat 2019-04-21
golang mongodb mysql_分享一个golang+mongodb+vuejs开发的博客程序 gocms 2019-04-21
hive java insert_hive表insert报错 2019-04-21
java 调试dll jna_Java调用dll的实现,JNA框架 | 学步园 2019-04-21
ios php上传视频文件_IOS上传图片 PHP服务器接收并上传 2019-04-21
php redis zrevrange,Redis Zrevrange 命令 2019-04-21
php利用word模板导出excel文件,php生成导出word doc和excel文件实例 2019-04-21
java 边缓存边播放,java动态缓存技术:WEB缓存应用 2019-04-21
matlab数据大小不兼容,MATLAB无法执行赋值,因为左侧的索引与右侧的大小不兼容。 求解... 2019-04-21
editor.md使用php,editor.md 配置参数和使用方法 2019-04-21
python mod,mod_python的安装 2019-04-21
python分析彩票数据,这波太炸了!Python脚本可视化居然可以这么玩 2019-04-21
简单的mysql重置root密码,重置mysql的root密码最简单的方法 2019-04-21
用matlab仿真mmc环流抑制器,一种基于准PR控制原理的MMC阀组环流抑制方法 2019-04-21