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 ...
随机推荐
- 万亿级日志与行为数据存储查询技术剖析——Hbase系预聚合方案、Dremel系parquet列存储、预聚合系、Lucene系
转自:http://www.infoq.com/cn/articles/trillion-log-and-data-storage-query-techniques?utm_source=infoq& ...
- bzoj2730矿场搭建——点双连通分量
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2730 首先一遍tarjan找出割点,将图缩点,这些大点中如果有只包含一个割点的,那么如果这个 ...
- 回味经典——uboot1.1.6 之 第二阶段 第三阶段
转自:http://blog.csdn.net/lizuobin2/article/details/52061530 上篇文章说到,再清 BSS 段之后,CPU 跳转到 sdram 里的 start_ ...
- MSSQL 调用 .net 代码
http://www.cnblogs.com/laozhao8/p/3398681.html 在SQL Server中调用.NET程序集 需求是这样的,我在.net程序里操作数据时将一些字段数据加 ...
- sublime配置java环境
今天突然不想用eclipse编写java了,觉得sublime挺好用,就想用sublime配置java环境,以下是过程以及出现的问题. 一.配置Java环境 1.打开我的电脑–属性–高级–环境变量 2 ...
- ElasticSearch基础之批量操作(mget+mbulk)
在前面的演示中,我们都是基于一次http查询,每次查询都要建立http的三次握手请求,这样比较耗费性能!因此ES给我们提供了基本的批量查询功能,例如如下的查询,注意里面的index是可以任意指明的 ...
- 3-1Java程序的执行流程
3-1Java程序的执行流程 用记事本写一个简单的程序 存到:E:\java路径下 class HelloImooc{ public static void main(String[] agrg ...
- json 与pickle模块（序列化与反序列化））
一.什么是序列化(pickling): 我们把对象(变量)从内存中变成可存储或传输的过程称之为序列化. 序列化可以持久保存状态, 不会根据计算机断电或者重启程序,而使得之前的数据状态丢失.可以在下次程 ...
- myeclipse 2014 没有Install New Software的解决办法
要安装离线zip包,但在myeclipse2014的help菜单中找不到 Install New Software 解决如下: help--install from site--add--archiv ...
- POJ - 3414 Pots BFS（著名倒水问题升级版）
Pots You are given two pots, having the volume of A and B liters respectively. The following operati ...