CSS 条纹背景深入
一、水平渐变
实现水平条纹很简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style>
.h100{
height: 100px;
}
.gra{
background: linear-gradient(#fb3 20%, #58a 80%);
}
</style>
</head>
<body>
<div class="h100 gra"></div>
</body>
</html>
效果如下：这样的效果一般就符合现实中的效果，#fb3 20% 表示上面背景颜色和颜色所占比例
linear-gradient里面的值表示背景渐变从上至下的颜色，一般的话两种就够了，如下：
.gra{
background: linear-gradient(#fb3 20%, #58a 30%,#ccc 50%);
}
还有一种情况：两个颜色区域所占的百分比都是50%或者最后一个设置为0，那么就会产生一种有意思的情况，那就是渐变区域没了，如下
实际上渐变区域是存在的，只不过是无限小。
我们还可以使用background-size实现条纹效果：
.gra{
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 20px;
}
二、垂直渐变
垂直效果的实现就有点难度了，还是那个属性：linear-gradient ，它里面有个默认的参数 to bottom，我们把它的值改成to right，background-size值颠倒，如下：
.gra2{
background: linear-gradient(to right ,#fb3 50%, #58a 50%);
background-size: 20px 100%;
}
三、倾斜渐变
实现倾斜渐变效果则会用到一个很偏的属性 repeating-linear-gradient 用法和linear-gradient一样
.gra3{
background: repeating-linear-gradient(45deg,#fb3,#58a 30px);
}
效果如下：
其实linear-gradient也可以实现倾斜渐变的效果，只不过计算宽度有点复杂了，这里不做讨论，得不偿失
在我们实际应用中，倾斜渐变效果还是存在的，一般的话以浅色系为主，写个简单效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
}
.gra3{
height: inherit;
background: repeating-linear-gradient(45deg,#F8F8FF,#F5F5F5 30px);
}
</style>
</head>
<body>
<div class="gra3"></div>
</body>
</html>
颜色有点淡，没怎么选。用css实现渐变比用图片实现就显得高端多了
CSS 条纹背景深入的更多相关文章
- css条纹背景
一. 水平条纹 1. 两种颜色: html <div class="stripe"></div> css .stripe{ width: 250px; he ...
- css条纹背景样式、及方格斜纹背景的实现
一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...
- css 条纹背景
先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...
- 用css实现条纹背景
我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...
- CSS揭秘 技巧（五）：条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- [css 揭秘] ：CSS揭秘 技巧（五）：条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
- 利用CCS3渐变实现条纹背景
本文摘自<CSS揭秘>中国工信出版集团 难题: 不论是在网页设计中,还是在其他传统媒介中(比如杂志和墙纸等),各种尺寸.颜色.角度的条纹图案在视觉设计中无处不在.要想在网页中实现条纹图案, ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- CSS 设置背景透明度，不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
随机推荐
- dancing link 精确覆盖 重复覆盖 (DLX)
申明:因为转载的没有给出转载链接,我就把他的链接附上,请尊重原创: http://www.cnblogs.com/-sunshine/p/3358922.html 如果谁知道原创链接 给一下,请尊重原 ...
- Python: PS 滤镜--旋转模糊
本文用 Python 实现 PS 滤镜中的旋转模糊,具体的算法原理和效果可以参考之前的博客: http://blog.csdn.net/matrix_space/article/details/392 ...
- HihoCoder 1508 : 剑刃风暴（占位）
描述 主宰尤涅若拥有一招非常厉害的招式——剑刃风暴,“无论是战士还是法师,都害怕尤涅若的武士刀剑技”. 现在战场上有N名敌对英雄,他们的位置分别为(Xi, Yi),而剑刃风暴的伤害范围是一个半径为R的 ...
- 蓝桥杯 2014本科C++ B组 奇怪的分式 暴力枚举
蓝桥杯 枚举 奇怪的分式 标题:奇怪的分式 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1 ...
- vs2012安装程序，无法注册ActiveX
最近开发环境换成了vs2012,用C#写了一个ActiveX插件程序,然后添加一个安装程序,但是安装后,ie无法识别AcitveX,在ie的Manage add-ons中也找不到,这在vs2010是没 ...
- SQL 维护计划（自动删除备份文件）
--开启修改配置功能 exec sp_configure 'allow updates', 0 --启用功能 sp_configure 'xp_cmdshell',1; reconfigure --临 ...
- Yet Another Number Sequence
题意: $F_0 = 0, F_1 = 1, F_n = F_{n-1} + F_{n-2}$ 求解$\sum_{i=1}^n{ F_i i^K } \ mod \ 10^9+7$. 解法: 记$ ...
- Excel2007格式分析和XML解析
1. excel2007是使用xml格式来存储的,把一个excel文件后缀改为.zip,打开之后就直接可以看到一个excel文件对应的xml格式的文件了. 这里面有几部分 对于docProps目 ...
- C# in查询
一.前言 在做项目中,我们会经常使用到 in 查询语句.那么如果我们用 EF 和 Linq 怎么写?接下来看代码 二.实例 我使用的是区域查询的例子,基本的 sql 语句如下: SELECT * FR ...
- 删除node_modul模块
npm安装rimraf ,npm版本号要是低于5.x.x 具体不记得了,不然就安装不了这个工具 npm install rimraf -g 然后: rimraf node_modules 在这里学到的 ...