html中背景条纹效果,使用CSS线性渐变 制作条纹背景
主要使用的属性 linear-gradient
background:linear-gradient(#000,#ccc);
Paste_Image.png
取消中间的渐变过度
background:linear-gradient(#000 50%,#ccc 50%);
Paste_Image.png
如果多个色标具有相同的位置值(就是颜色后面跟的百分比),他们会产生一个无限小的过渡区域,过渡的起止色分别是第一个和最后一个指定值,从效果上看,颜色会在那个位置突然变化,而不是一个平滑的渐变过程
通过background-size来调整尺寸
background:linear-gradient(#000 50%,#ccc 50%);
background-size:100% 30px;
Paste_Image.png
应为背景色默认是repeat的,所以会出现斑马条纹
不等宽条纹
background:linear-gradient(#000 30%,#ccc 30%);
Paste_Image.png
这个后面的30%为什么会占用这个30px高度的百分之70%(我的理解是后面的这个30%代表的是从这个位置,一直到100%都是使用这个颜色)
另外一种写法background:linear-gredient(#000 30%,#ccc 0); 这个后面的‘0’的解释是:如果某个色标的位置值比整个列表中在它前面的色标的位置值都要小(就是这个0是比它前面的所有百分比都小),则该色标的位置值会被设置为它前面最大的位置值的最大值(就是这个0其实现在等于30%),如果是这样的(#000 20%,#ccc 40%,#ffa 0),那这个0就是40%
垂直条纹
background:linear-gradient(to right,#000 50%,#ccc 0);
background-size:30px 100%;
Paste_Image.png
斜向条纹
background:linear-gradient(45deg,#000 50%,#ccc 0);
background-size:30px 30px;
Paste_Image.png
这个办法行不通,原因是我们只是把每个贴片旋转了45deg(就是30*30的背景),而不是把整个背景都旋转了。如果要做成斜向条纹,我们要为贴片设置四条条纹,而不是两条,只有这样才有可能做到无缝拼接
Paste_Image.png
linear-gradient(45deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0)
background-size:30px 30px;
Paste_Image.png
如果给中间加上一个白色的框,就可以出现条纹背景的效果了
.wrap{width:200px;height:300px;background:linear-gradient(45deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0);background-size:30px 30px;padding:10px;box-sizing:border-box;}
.fff{width:180px;height:280px;background:#fff;}
信封效果
更好的斜向条纹
前面展示的方法其实不够灵活,如果我们需要的不是45度的条纹怎么办,如果直接改45这个数字,就是出现下面的效果
background:linear-gradient(60deg,#000 25%,#ccc 0,#ccc 50%,#000 0,#000 75%,#ccc 0);
background-size:30px 30px;
都没眼看了
这里要介绍一个加强版的线性渐变 repeating-linear-gradient(),其实它的工作方式和前面的一样,只是有一点不同:色标是无限循环重复的,直到填满整个背景。
background:repeating-linear-gradient(45deg,#000,#ccc 30px);
/*background-size:30px 30px;(不需要加background-size了)*/
Paste_Image.png
改写一下
background:repeating-linear-gradient(45deg,#000,#000 15px,#ccc 0,#ccc 30px)
这里的前两个色标我的理解是(#000从左下角走15个像素),后面两个色标(#ccc从15px一直到30px),下面是最终效果
Paste_Image.png
/*如果需要更改角度*/
background:repeating-linear-gradient(60deg,#000,#000 15px,#ccc 0,#ccc 30px)
Paste_Image.png
html中背景条纹效果,使用CSS线性渐变 制作条纹背景相关推荐
- 巧用CSS background-image属性制作图形背景
先看一张广告图,这是我们平时在浏览网页的时候,经常见到的一种文字广告设计,在文字周围绕着白色线条,我想大多数设计师可能就直接在ps中画一个png图片,再用css background-image 背景 ...
- html垂直线性渐变,CSS线性渐变 垂直和水平渐变linear-gradient
CSS线性渐变 .test1{ width: 200px; height: 80px; text-align: center; line-height: 80px; margin-bottom: 10 ...
- html中擦窗效果,纯CSS写的小雨打在窗户上效果
华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上.站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐.似乎如此的场景只有在诗中才会出现.那么今天我们一起来用CSS技术来描绘这样的一个场景. 这里仅是用 ...
- 深入理解CSS线性渐变linear-gradient
前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性 ...
- html边框颜色线性渐变,CSS线性渐变linear-gradient() 函数实现div边框四角样式
先看下要实现的效果. 四个角边框高亮 css代码实现 红色框box-red样式,蓝色的只是变换了颜色.box-title是图上渐变实现. .box-red { background: linear-g ...
- CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法 总结 1.线性渐变 1.1.什么是线性渐变 线性渐变,顾名思义就是 ...
- 兼容IE与firefox的css 线性渐变(linear-gradient)
IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F90 ...
- backgroundLinearGradient线性渐变制作折角效果
backgroundLinearGradient线性渐变,制作折角效果 语法 线性渐变 - 从上到下(默认情况下) background: linear-gradient(direction, col ...
- html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...
最新文章
- Maven 版 JPA 最佳实践(转)
- Leaflet中获取两个地理坐标点之间的距离
- EevExpress中XtraGrid常用方法
- __stdcall __cdecl 引起的程序崩溃
- 一个初级的前端工程师需要知道些什么?
- 成功者十三个价值连城的习惯
- @程序员,如何快速配置 Spring?
- Atitit.判断元素是否显示隐藏在父元素 overflow
- System center 2012 R2 实战九、SCOM+sharpoint+visio实现全国地图展示
- 电力系统分析实验--生成节点导纳矩阵
- 数据分析十年来电影票房数据
- Dynamics 365 窗体中设置可编辑的子网格
- 目录结构及其文本编辑器
- WPF入门第六篇 WPF的Binding
- 计算机毕业设计Python+uniapp快递寄取微信小程序(小程序+源码+LW)
- 1,JavaScript前世今生
- 【LeetCode】417. Pacific Atlantic Water Flow 太平洋大西洋水流问题
- 【Ruby on Rails全栈课程】3.1 宠物之家论坛管理系统介绍
- matplotlib工具栏源码探析四(自定义工具项图标)
- 蓝牙扫描必要条件及高德定位授权