background-image
CreateTime--2017年12月26日14:51:21
Author:Marydon
background-image
1.background-image:url()
作用:设置背景图片
语法:
background-image:url(path)
说明:
path既可以是相对路径又可以是绝对路径,不需要添加单引号,即url('path')
2.background-image:linear-gradient()
参考链接:http://www.css88.com/book/css/values/image/linear-gradient().htm
作用:设置线性渐变背景色
语法:
background-image:linear-gradient(direction, color1, color2);
第一个参数:angle
用途:表示渐变的方向,
对应参数值:可以使用角度值或者关键字(角度)来设置
参数值说明:
使用角度值表示时,单位为:deg;
to left:设置渐变为从右到左。相当于: 270deg;
to right:设置渐变从左到右。相当于: 90deg;
to top:设置渐变从下到上。相当于: 0deg;
to bottom:设置渐变从上到下。相当于: 180deg。
对角线方式渐变
to top left:渐变方向右下-->左上
to top right:渐变方向左下-->右上
to bottom left:右上-->左下
to bottom right:左上-->右下
第二个参数
用途:渐变色的起始颜色
对应参数值:格式为 color [px|percent]
参数值构成说明:
color:取值范围为[#000000,#FFFFFF];
中间是空格;
px|percent:像素或百分比,用长度值指定起止色位置,不允许负值|用百分比指定起止色位置。
第三个参数
用途:渐变色的结束颜色
其余同上
说明:
表示颜色的参数至少要有两个,当需要多种颜色时,可以添加多个颜色参数;
当不指定起止位置时,颜色会默认进行均匀分配。
举例:
参考地址:http://blog.csdn.net/qq_18661257/article/details/50640633
不指定比例(均匀分配)
.style3{ background-image:linear-gradient(40deg, #99CC33, #FF6666,#336699,#FF0033); }
<div style="width:200px;height:200px;" class="style3"></div>
效果展示:
指定比例(不均匀自主控制渐变)
.style3{ background-color:#33CC99; background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); }
说明:
第一个rgba(255,255,255,.15) 25%,说的是从左下角开始起到25%为rgba(255,255,255,.15),这里默认隐藏了起始点的设定;
然后transparent 25%到50%是透明的(transparent);
25%到75%为rgba(255,255,255,.15)这个颜色;
从75%到100%为transparent,这里又省略了一个100%,他是默认值;
这代码直接使用时没有什么效果的,他必须有背景颜色做衬托。
效果展示:
说明:
这是css3的语法,IE6.0-9.0使用私有滤镜来实现该效果,详情请移步至文章:css 滤镜之Gradient
本文来自博客园,作者:Marydon,转载请注明原文链接:https://www.cnblogs.com/Marydon20170307/p/8118312.html