背景是不规则图案css,CSS3 实现花式背景图案
CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景,事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果,例如参照css3patterns。本篇就举几个例子介绍一下它们实现的原理。
网格桌布 Blueprint grid
先画格子线:
.bluePrint { width: 180px; height: 120px; background-color:#269; background-image: linear-gradient(red 1px, transparent 0), linear-gradient(90deg, yellow 1px, transparent 0); background-size:20px 20px;
}
background-image设置两个背景层,背景层里用linear-gradient画1px的实线(为了演示效果,先把横线设为红色,竖线设为黄色)。
如果眼神好会看到,元素顶边和底边是1px红色,左边和右边是1px的黄色,本着精益求精的精神,用background-position:-1px -1px;把它们去掉:
现在你可以再画一张不同线宽的背景图,无非就是上面代码的基础上改改线宽:
css3pattern3.png
background-image: linear-gradient(white 2px, transparent 0), linear-gradient(90deg, white 2px, transparent 0);background-size: 100px 100px;background-position:-2px -2px;
最后两张图合并起来就搞定了:
//完整代码.bluePrint {
width: 180px;
height: 120px;
background-color:#269;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
CSS代码很简短,而且维护很容易。不比加载img或svg差多少。
国际象棋 checkerboard
有了上面的经验,再试试国际象棋桌布。所谓棋盘无非就是两种颜色的方块错开的图案。看似容易,其实用一层CSS渐变是很难实现的。诀窍是用两个直角三角形拼出一个正方形。先画左下角的三角形:
.checkerboard { width: 180px; height: 120px; background-color: #eee; background-image: linear-gradient(45deg, #bbb 25%, transparent 0); background-size: 30px 30px;
}
再画右上角的三角形:(为展示效果,先将颜色设成红色)
background-image: linear-gradient(45deg, transparent 75%, red 0);
两张背景叠起来:
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, red 0);
发现拼出来的效果不是正方形,原因是叠的位置不对。用background-position将第二层图片(红色三角)再往左下移动一半位置:
background-position: 0 0, 15px 15px;
现在正方形出来了,怎么实现国际象棋那样错开呢?复制一个一样的图层,再如下蓝框所示,将新旧图层错开叠加:
复制出来的新图层,设置background-position往右下偏移一半距离,如蓝色框所示:
background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, red 0),
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, red 0);
background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
最终将红色改回正常色就搞定了:
//完整代码.checkerboard {
width: 180px;
height: 120px;
background-color: #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-image还可以精简至两行,请自行参照css3patterns的源码。
波点 polka
明白了上面国际象棋的实现,那波点就更简单了,原理都是一样的,图层错峰叠加。圆点需要将线性渐变改成径向渐变,直接上源码:
.polka { width: 180px; height: 120px; background-color: #655; background-image: radial-gradient(tan 15%, transparent 0), radial-gradient(tan 15%, transparent 0); background-size: 60px 60px; background-position: 0 0, 30px 30px;
}
斑马条纹 zebra
为了增加文字的可读性,有时候会遇到给文章加上斑马条纹背景的需求。这个需求其实不太好实现。因为文章通常都不在table里。我们可以用伪类:nth-child,:nth-of-type轻松给table实现斑马条纹,但显然不能在其他元素内部用伪类实现斑马条纹。
极端一点你可以给每一行文字都包进div里,然后间隔地对div添加背景色来实现斑马条纹。但显然不到万不得已,你一定不愿意尝试这个方法。更要命的是,用这个方法后,不能改变文字font-size,否则文字变大发生折行的话,背景图案就会使页面显得非常错乱。
看了上面的例子你可能也猜到了,我们将使用渐变来实现斑马条纹。用em设定背景尺寸,这样实现的斑马效果可以自适应font-size的任何变化:
pre {
padding: .5em; line-height: 1.5; background: green no-repeat; background-image: linear-gradient(pink 50%, transparent 0); background-size: auto 3em;
}
弄成上图这样是为了调试方便,为了不让代码行顶天立地,所以设了padding。设line-height:1.5,background-size为其2倍为3em,这样能使一个线性渐变图层覆盖两行。背景设成no-repeat只是为了看清图层间的层叠关系。现在将no-repeat去掉,再把颜色调整一下:
效果已经很接近了,设line-height和background-size使一个线性渐变图层覆盖两行。但覆盖的效果没有实现居中,这是因为background-origin默认是padding-box,会加上0.5em的padding,因此将其改成context-box就行了:
pre {
padding: .5em; line-height: 1.5; background: hsl(20, 50%, 95%); background-image: linear-gradient(rgba(120,0,0,.1) 50%, transparent 0); background-size: auto 3em;
background-origin: content-box;
}
总结
像上面这些例子写成CSS代码,并不多,可以用预处理器Sass简化一下。传统的加载图片方式相比之下,多了一次HTTP请求,并无太大优势。
但css3patterns上一些比较复杂的背景图案(例如CSS源码体积超过500B的),虽然用CSS实现很酷炫,但图层太多过于复杂,除了作者自己外,别人维护起来比较困难,可能SVG或加载图片更合适。例如这些背景:
正如本篇开头说的“事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果”。我知道程序猿里有一条隐藏的鄙视链,比如做C++的看不起做Java的,Java的看不起JavaScript,JavaScript的看不起CSS(好吧,我承认说的就是以前的自己...作为一个C++程序猿,什么Python,Perl,JS,CSS好没技术含量...)。永远不要被各种心理因素,或条条框框限制住。Open mind,你会发现其实CSS真是潜力无穷。
感谢LEA VEROU提供的这些精美的背景图案,感谢CSS魔法译著了《CSS揭秘》这本书,前端工程师不容错过。
作者:张歆琳
链接:https://www.jianshu.com/p/82c5f2134c99
背景是不规则图案css,CSS3 实现花式背景图案相关推荐
- android 背景图遮罩,通过css使用background-color为背景图添加遮罩效果
一个div同时设置background-color和background-image的话,color是处于img层下方的,无法实现遮罩效果,所以需要再创建一个div作为其子div,然后设置子div的背 ...
- 百度css3背景图代码,CSS3 实现花式背景图案
CSS3 gradient介绍一文中介绍了用渐变画实线条纹背景,事实上用渐变配合background背景图层可以创造出各种奇妙的背景效果,例如参照css3patterns.本篇就举几个例子介绍一下它们 ...
- html怎么使背景图片充屏,css如何使div背景图片填充
2016-07-08 00:56车庆云 客户经理 css代码添加背景图片常用代码 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url( ...
- css编程设置网页背景,网页中cssbackground背景图和背景颜色的设置方法
CSS 背景这里指通过CSS对对象设置背景属性,如网页中通过CSS设置背景各种样式. Css background背景作用:设置纯色背景.背景background可以设置对象纯色的背景颜色,设置图为背 ...
- CSS3动画实现背景图轮播
CSS3动画实现背景图轮播 利用css3动画切换背景图的路径:使这个动画无限循环下去,以实现背景图切换的效果. 代码: <!DOCTYPE html> <html lang=&quo ...
- CSS应用:复杂背景图案
通过线性渐变和通过径向渐变可以容易的构造出条纹背景(如果你还对线性渐变和径向渐变不了解,请参考我前面的文章线性渐变和径向渐变,你也可以在遇到困难的时候再去查阅),但他们能做的事情远不止于此,使用他们能 ...
- css背景上能添加文字,CSS3怎么为文字添加背景?
这两天在写官网,标题标语之类的文字都是带有流光溢.炫酷图案的文字 大致就像苹果官网上的那些slogan吧,可不是简单的渐变色之类哦 但是由于使用了CSS3属性,所以要考虑到兼容性,仅Webkit内核的 ...
- CSS实现背景图片不规则的导航菜单
一般情况下导航菜单的背景图片都是比较有规则的,但是平时我们也会遇到很多背景图片形状不规则导航条(比如但鼠标移上的时候,背景图片不规则,本例只讨论此种类型),如下图所示: (图一) 当鼠标移上去的时候背 ...
- css动画唯美背景,小码哥-利用CSS3渐变实现唯美背景图
原标题:小码哥-利用CSS3渐变实现唯美背景图 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐 ...
最新文章
- Python爬虫之reuqests实现简单网页采集--网页采集教程
- 相机模拟光圈_我的相机应该使用什么光圈?
- mybatis学习(46):二级缓存被刷新的情况
- flutter offset_牛笔!自己用Flutter撸一个天气APP
- Redux技术架构简介
- @Intercepts-mybatis拦截器
- elementUI中table中自定义修改时间格式2020-10-26T10:00:00
- EF Core 小工具
- hadoop component summary
- 国脉信息学院计算机网络,福建工程学院国脉信息学院《计算机网络模拟题》
- java实现高德地图app_入门指南-高德地图手机版 | 高德地图API
- ubuntu 18.04 识别不到有线网卡
- Oracle11G数据库重演测试
- 计算机专业论文谢辞,计算机专业论文致谢信.docx
- Vue实现Google登录
- SPH算法的理论和实践(1)
- vue项目搭建以及环境配置
- 最新青龙面板拉库JS
- 【2017.11.15】设计师的正确工作流程
- 中国营销人的第6项修炼
热门文章
- Mysql 创建表时报错1103:Incorrect table name【问题记录】
- BERT模型—5.BERT模型在句子分类任务(意图识别)上的微调
- SD卡的驱动(linux操作系统下)
- 虚幻4与Unity: 哪个游戏引擎是开发者的最爱?
- 从键盘任意输入一个4位数n c语言,c语言编程题
- 深入剖析Auto Layout,分析iOS各版本新增特性
- 【Linux网络编程】网络基础知识
- 有限自动机和右线性文法笔记
- MockMockito使用手册
- json mysql 字段 默认值_MySQL新增JSON类型字段的使用总结