条纹背景

https://github.com/FannieGirl/ifannie/
问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗?

这一章相对还是比较复杂的哦!一起get.
首先我们做一个渐变的背景

横条背景

现在我们把这两个色标拉近一点

这样好像条纹背景 就出来了哦!不过这是横向的,是不是还可以竖线呢!肯定是可以的啦,看看多变的条纹背景

竖条背景

斜向背景

这样的条纹背景还是不够灵活的。还有更好的方案

liear-gradient() 和 radial-gradient() 还各有一个循坏的加强版:repeating-liear-gradient() 和 repeating-radial-gradient() 他们的工作方式是跟前两者类似的,但是不同点是:色标是无线循环重复的,直到填满整个背景。

灵活的同色系条纹

一般情况下,我们想要的条纹图案并不是由差异极大的几种颜色组成的,这些颜色往往属于同一色系,只是在明度方面有着轻微的差异

实例演示地址:https://jsfiddle.net/06sjmL6n/13/

后言:
如果你对基础的知识点已经很熟悉,你可以自动跳过。写上去的原因是查漏补缺,巩固一下基础。
如果有不对的地方,欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school;
参考链接 :http://www.w3school.com.cn/cssref/pr_background-clip.asp

CSS揭秘 技巧(五):条纹背景的更多相关文章

  1. [css 揭秘] :CSS揭秘 技巧(五):条纹背景

    条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...

  2. [css 揭秘]:CSS揭秘 技巧(三):背景定位

    我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...

  3. [css 揭秘]:CSS揭秘 技巧(二):多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...

  4. [css 揭秘]:CSS揭秘 技巧(一):半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  5. [css 揭秘]:CSS揭秘 技巧(四):边框内圆角

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 边框内圆角 问题:有时候我们需要一个容器,只在内侧有圆角,而 ...

  6. CSS揭秘(二)背景与边框

    Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容 ...

  7. 02--css背景与边框--css揭秘

    背景与边框 一 半透明边框 rgba/hsla颜色 1.难题 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来.我们最开始的尝试可能是这样的: #bo ...

  8. 《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  9. CSS揭秘—灵活的背景图(三)

    前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度 ...

随机推荐

  1. 《JAVA语言程序设计》上课笔记

    教学目标:1.使学生了解JAVA课程的性质.定位.作用:为什么要学习JAVA?让学生知道如何学好JAVA: 教学内容: 一.        问几个问题 1.             你们到这里来干什么 ...

  2. PHPcms 把盛大登陆换成人人网登陆

    首先要确保你的 phpcms是比较新的版本, v9.3以后的吧 这里说明一个函数 rawurlencode() 本函数将字符串编码成 URL 的字符串专用格式,特殊的字符会转换成百分比符号后面加上二个 ...

  3. gcd-函数

    在网上看到了这个函数 int gcd(int a,int b){if(a==0) return b; if(b==0) return a; return gcd(b,a%b);} 是求最大公约数的 有 ...

  4. NamingException with message: Name [spring.liveBeansView.mbeanDomain]

    spring mvc启动出现 NamingException with message: Name [spring.liveBeansView.mbeanDomain],解决方式: 在web.xml中 ...

  5. delphi BitmapCompress

    unit Unit2; interface uses  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Va ...

  6. CentOS 6.5下NFS安装配置

    [root@local /]# yum -y install nfs-utils rpcbind3.创建共享目录:[root@local /]# mkdir /sharestore4.NFS共享文件路 ...

  7. OpenCV 3.2正式发布啦

    2016年12月23号OpenCV社区宣布了OpenCV3.2版本正式发布,这个是在OpenCV3.1版本发布一年以后再次升级.在3.2版本中有总数超过数千个的改进与修正,是OpenCV3.x系列中最 ...

  8. MyEclipse-Initializing Java Tooling问题

    问题描述: 今天早上打开Eclipse,打开Package Explorer 中项目时,总出现卡死现象. MyEclipse状态栏显示两个任务,(1) Checking for Updates (2) ...

  9. DBCC CHECKIDENT在 SQL Server修改指定表的当前标识值

    强制将当前标识值设为新值 ---最后 0 表示新值从1开始 --注意若前边有内容,最好删除,不然id会重复 DBCC CHECKIDENT ("表名称", RESEED, 0);

  10. ion-scroll zooming="true" android端无法缩放的问题

    很久很久没更新博客了,从今天开始决定以后陆续写一些博文,总结下自己在开发中碰到的问题. ionic项目.ion-scroll zooming="true" 在android端无法缩 ...