background-image

最新推荐文章于 2024-06-25 10:20:33 发布

转载最新推荐文章于 2024-06-25 10:20:33 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Marydon20170307/p/8118312.html

本文介绍了CSS中背景图片的设置方法及线性渐变背景的应用技巧，包括不同方向的渐变设置及如何通过指定比例实现不均匀的渐变效果。

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.youkuaiyun.com/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

转载于:https://www.cnblogs.com/Marydon20170307/p/8118312.html