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 ...
随机推荐
- 网页上传FLV视频文件
上传 flv格式文件一致提示文件类型不允许,是因为CI中的配置文件没有支持这个格式 在 application/config/mimes.php中加入 'flv' => array('video ...
- 我的CSDN博客
从csdn搬过来的: csdn地址:http://blog.csdn.net/WR_technology
- 【C/C++】函数指针
首先必须要清楚如下: [1]函数指针即函数的地址,也就是存储其机器语言代码的首地址.该地址用函数名表示. [2]用具体的函数名给函数指针变量赋值时必须满足两者的类型(即函数返回值类型)和特征标(即函数 ...
- POJ3061 Subsequence
Subsequence Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16520 Accepted: 7008 Desc ...
- JUC类图
JUC的类图总览.
- bzoj 1096 仓库建设 —— 斜率优化DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1096 设 f[i] 为 i 作为最后一个仓库时前 i 个工厂的答案,最后的答案当然是 f[n ...
- IE8 以上版本兼容
在html的内如下写法 其中最后一行是永远以最新的IE版本模式来显示网页的. 另外加上Emulate模式 Emulate模式后则更重视 (细心的人会注意到,用IE9去访问带有x-ua-compatib ...
- 让App飞久一点
此文已由作者杨晓授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 本文从作者所在项目进行的耗电量测试入手,介绍了移动端App耗电量测试的一些基本概念和方法,重点介绍了iOS应用 ...
- HDU 3499【最短路】
题意: 给你一幅图,然后起点终点,然后有一个条件是可以使某条边的花费减半,求最短路的最小花费. 思路: (来自大哥) 最短路的时候多一维,途中是否有花费减半的边: 然后转移,如果上一条有减半的,这一条 ...
- tp5 验证码功能实现
视图层 <div class="loginbox-textbox"> <input class="form-control" placehol ...