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：像素或百分比，用长度值指定起止色位置，不允许负值|用百分比指定起止色位置。

第三个参数

用途：渐变色的结束颜色

其余同上

说明：

表示颜色的参数至少要有两个，当需要多种颜色时，可以添加多个颜色参数；

当不指定起止位置时，颜色会默认进行均匀分配。

举例：

参考地址：​​javascript:void(0)​​

不指定比例（均匀分配）

.style3{
    background-image:linear-gradient(40deg, #99CC33, #FF6666,#336699,#FF0033); 
}
<div style="width:200px;height:200px;" class="style3"></div>

效果展示：

background-image_渐变色

 

指定比例（不均匀自主控制渐变）

.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%，他是默认值；

　　这代码直接使用时没有什么效果的，他必须有背景颜色做衬托。

效果展示：

background-image_CSS_02

说明：

　　这是css3的语法，IE6.0-9.0使用私有滤镜来实现该效果，详情请移步至文章：​​css 滤镜之Gradient​​

 

 

作者：​​Marydon​​