百度css3背景图代码,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揭秘》这本书,前端工程师不容错过。
百度css3背景图代码,CSS3 实现花式背景图案相关推荐
- H5页面设置背景图,微信可浏览背景图
最近做项目需要在微信播放视频,设置播放的背景图,折腾了好久 <div class="video-back" :style="{backgroundImage: 'u ...
- html内容被背景图片遮住怎么办_定义BODY背景图后,DIV的背景图片显示不全(已解决)...
你的位置: 问答吧 -> WEB标准 -> 问题详情 定义BODY背景图后,DIV的背景图片显示不全(已解决) 一个有趣的问题,当BODY有背景图片的时候,BODY里的DIV一旦也有背景图 ...
- html 背景图片比例,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计. 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图, ...
- php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样 设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面 错误的写法:加到div中结合图片设置min-height, ...
- echarts热力背景图_Echarts 图表中设置背景图片
在项目开发过程中,遇到在Echarts图表上添加背景图的需求,通过查找Echarts官网的配置项,发现 graphic 能够实现在图表中设置背景图片. image 在Echarts的实例中,找到一个实 ...
- div自适应背景图的尺寸:设置背景图的方式;img作为div元素的方式
目录 零.问题描述和基本情况介绍 案例: 问题及疑问: 一.background-size:cover;和background-size:100%;的区别: 1.background-size:100 ...
- 电脑桌面怎么设置html背景图,css中如何设置背景图片?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css怎样设置背景图片? css back ...
- php怎么添加背景图html,html怎么导入背景图
html导入背景图的方法:1.用html标签插入图片,这里直接在img标签中使用src属性:2.用css插入,在div中设置class属性为img2,在script标签中使用background标签插 ...
- 多背景图CSS,CSS3设置多张背景图片
个人作业--week1 1.问题 (1)与软件学院相比,计算机科学更偏向理论研究,本系开设软件工程课程的意图是否是为了平衡理论与应用的比重? (2)Bug的定义根据开发者与使用者的分析角度不同,有着很 ...
最新文章
- Handler造成Activity泄漏,用弱引用真的有用么?
- Centos 6.5 64位双网卡绑定
- 真香!GitHub刚刚宣布:私有库免费啦!
- 前端开发怎么用php,做web前端开发怎么样?
- 从中师到博士,我用了22年...
- 2dpsk调制解调实验matlab_ila抓取数据,matlab分析,调试AD9361信号通路
- Spring @Scheduled定时任务调度配置的详解
- 【栈与队列】剑指offer:两个栈模拟队列
- php redis缓存雪崩,redis雪崩是什么
- 我的公司不是家 【联想员工亲历联想大裁员】
- 自然语言处理之——句法分析
- 怎么用计算机扫描,怎么用电脑扫描文件
- 重大问题思考-2021年总结
- 数据治理系列8:数据价值管理
- Windows下安装Nexus私服及更新索引
- 阿里云 mysql 1045_解决阿里云登录mysql出现的1045错误
- 月薪 2 万到 3 万的测试员一天是怎样度过的?
- 电脑知识 小技巧汇总
- mysql innodb热备_mysql主从热备配置(含innodb)终极版
- org.apache.axis.client.Service调用服务webservice时报Unexpected wrapper element sayHello found. Expected
热门文章
- node 开启服务器
- JAVA实现彩色图片转黑白图片 (ImageIO类)
- Mysql 慢日志查询小于1000ms显示0s问题排查
- Wine Mono 环境安装并运行.Net WPF
- Javascript迭代、递推、穷举、递归常用算法实例讲解
- 基于CAD的花灯制作
- 拜托,你的这些努力一定要让HR看见!
- linux下用C语言实现MP3播放器
- jaeger client java_grpc分布式链路跟踪之jaeger
- c语言程序设计第二版(张磊),C语言程序设计教程(第2版) 教学课件 张磊 第9章 文件程序设计.pdf...