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 ...
随机推荐
- smarty模板引擎基础（二）
smarty模板引擎所需文件夹共可分为存放页面缓存的(cache).存放配置文件的(configs).存放模板扩充插件的(plugins).存放模板文件的(templates).存放编译后的模板文件的 ...
- MySql服务未知原因消失了的终极解决办法
刚才突然MySQL-Front打开不了MySql,果不其然发现是MySql的服务不见了.想起可能是昨晚安装了PhpStudy的点了不要MySql的选项,它把我本身的MYSQL服务给卸载了. 解决办法 ...
- linux应用之gcc编译器的安装及使用
gcc是linux系统下功能十分强大的编译器. 本人使用的是CentOS 6.6 64位系统,由于在安装系统的时候并没有勾选安装gcc编译器,因此需要自行安装gcc编译器. 使用yum安装gcc 对于 ...
- requireJS 加载css、less文件
-- requireJS 同样可以加载css 文件,有require-css的插件,只需要把插件放入main.js同文件夹,在依赖处 采用 ‘css! test.css’的形式就可以加载css文件 - ...
- Messes in Reading Source Coding of SSD
这里记录在学习SSD源码过程中用到的相关内容 keras.applications.imagenet_utils.preprocess_input(): 用来将读入的原始图片张量转换成为需要Image ...
- HTTP上传大文件要考虑的问题
1.大文件上传服务器内存占用 一般WEB开发框架如SpringMVC,在基于Web容器如Tomcat处理HTTP请求时,都倾向于采用职责链流水线式的处理机制.HTTP请求被封装为一个可解析对象放在内存 ...
- button的FlatStyle和FlatAppearance属性
FlatStyle是处理边框的样式,而FlatAppearance是用来设置边框的颜色,宽度和鼠标移动和点击时的效果设置FlatStyle为Flat,并且设置FlatAppearance下的Borde ...
- 查看Spring源码的方法
来自为知笔记(Wiz)
- CodeForces 1098E. Fedya the Potter
题目简述:给定长度为$n \leq 5\times 10^4$的序列$a_1, a_2, \dots, a_n \leq 10^5$.将$\gcd(a_l, a_{l+1}, \dots, a_r) ...
- Java中的标识符，类名和包名规则
Java中的包.类.方法.参数和变量的名称 标识符的命名规则 1.变量必须以字母.下划线(_)或美元符号($)开头 2.余下的字符可以是下划线.美元符号或任何的字母或数字 3.不能使用JavaScri ...