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 ...
随机推荐
- 加快你的JavaScript加载时间
发现可以提速的内容 你必须首先发现你的什么图片和HTML加载缓慢了你的脚本速度,下面提供了方法: 1. Firefox web-developer toolbar 2. Firebug Plugi ...
- HTML标题和段落
HTML标题 通过<h1> - <h6> 等标签进行定义 <h1>一标题</h1> <h2>二标题</h2> <h3> ...
- hdu-4857 逃生(拓扑序)
题目链接: 逃生 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Proble ...
- luogu 3389 【模板】高斯消元
大概就是对每一行先找到最大的减小误差,然后代入消元 #include<iostream> #include<cstdio> #include<cstring> #i ...
- 快速沃尔什变换(FWT)学习笔记 + 洛谷P4717 [模板]
FWT求解的是一类问题:\( a[i] = \sum\limits_{j\bigoplus k=i}^{} b[j]*c[k] \) 其中,\( \bigoplus \) 可以是 or,and,xor ...
- Code：NFine目录
ylbtech-Code:NFine目录 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylb ...
- 《Kubernetes权威指南第2版》学习（一） Kubernetes是什么
1.1 Kubernetes是什么? 首先,它是一个全新的基于容器技术的分布式架构领先方案.是谷歌的Borg(大规模集群管理系统)的一个开源版本. 其次,如果系统设计遵循了Kubernetes的设计思 ...
- 纯css 图片自适应居中
html 结构 <div class="container"> <div class="content"></div> &l ...
- Codeforces1110F Nearest Leaf dfs + 线段树 + 询问离线
Codeforces1110F dfs + 线段树 + 询问离线 F. Nearest Leaf Description: Let's define the Eulerian traversal of ...
- CodeForces 1110H. Modest Substrings
题目简述:给定$1 \leq l \leq r \leq 10^{800}$,求一个长度为$n \leq 2000$的数字串$s$,其含有最多的[好]子串.一个串$s$是[好]的,如果将其看做数字时无 ...