linear-gradient()图像渐变属性详解
Posted beimingbingpo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了linear-gradient()图像渐变属性详解相关的知识，希望对你有一定的参考价值。
https://blog.csdn.net/qq_18661257/article/details/50640633
对于linear-gradient()我学习的时候，查了很多资料，但是发现不管是网上还是一些书籍，都没有将这个属性的运用讲得明白，清楚，对此，我写了这篇博客，虽然不能保证每一位读者都能够看懂，但是也希望这篇博客能为你提供一些帮助，如有问题，请在博客中提出，谢谢。
首先给大家讲的就是兼容性，在IE浏览器中这个属性的设置是不兼容的，当然在IE浏览器中也可以实现类似的效果，那边是滤镜(fliter)的作用了.其他的不同的浏览器也是有不同的，比如chrome一般要加-webkit-前缀，如：-webkit-linear-gradient，比如opera就是-o-linear-gradient。
linear-gradient是属于CSS3中Gradient中的两个属性一个，这两个属性分别为linear-gradient（线性渐变）和radial-gradient（径性渐变）,其中linear-gradient线性渐变呈现线性变化，大家一看名称就可以知道这相当于是直线变化，比如充左上角到右下角的变化，或者从上到下，而radial-gradient径性渐变呈现径性变化，这便是大家经常见到的圆圈渐变效果，从图像的中间向四周进行变化，像是大家仍块石头到河里荡起的涟漪一样。而本片博客则是讲解linear-gradient,当然，linear-gradient和radial-gradient是相通的，他的使用方法一样，则是呈现的效果不同而已。
如下是简单的linear-gradient的使用
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linear-gradient</title>
<style type="text/css">
*{margin:0;padding:0;}
.posDir{margin:100px auto;}
.linearBar{width:100px;height:100px;border:1px solid #ccc;
background-image:linear-gradient(45deg, #000,#fff);
/*********************************偏向角度,起始点颜色,终止点颜色***************/
}
</style>
</head>
<body>
<div class="linearBar posDir"></div>
</body>
</html>
效果:
这里提到了background-image:对这个属性进行linear-gradient,简单的说这个linear-gradient设置是针对图片的，所以必须是放图片的属性才能运用这个linear-gradient进行设置.
除了以上的角度使用(40deg),除此之外，还有提供的一些类似于C语言中的常量的东西,如下:
linear-gradient(left bottom, #000, #fff);
这个用来代替上面background-image中linear-gradient会产生一样的效果。
其中，第一个选项可以是top, left, bottom, center, right.
以上是对于最常见的两种颜色的使用，但是这并不能满足我们的需求，
所以多种颜色的运用是必不可少的，接下来就是多种颜色的讲解。
background-image:linear-gradient(40deg, #99CC33, #FF6666,#336699,#FF0033);
将代码中的background-image改为如上代码，会呈现如下效果:
如此，这效果，是#99CC33, #FF6666,#336699,#FF0033均匀分布产生的结果，自然默认是均匀的，那么自然也存在不均匀的，这就需要我们自己设置了，这也是网上资料坑爹的地方，他们没有对这一属性的使用进行简单明了的讲解，所以我来插一脚，写一个:
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-color:#33CC99;呈现的效果如下:
如此便是有一个运用，那就是进程条，当我们将这个东西运用到实际的时候，会发现，这个东西形成的东西如此美观，代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linear-gradient</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"微软雅黑";}
.progress{margin:100px auto;width:80%;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border-radius:4px;
height:20px;overflow:hidden;background-color: #f5f5f5;}
.progress-bar{float:left;width:0;height:100%;line-height:20px;color:#fff;text-align:center;
background-color: #5cb85c;box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);}
.progress-bar-striped{width:100px;height:100px;border:1px solid #ccc;
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);
background-size:40px 40px;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:60%">60%</div>
</div>
</body>
</html>
效果如下:
如上的效果中的间隔式的波浪便是渐变的效果，是不是非常的美观好看，此中还有个background-size这个设置，这是为了设置渐变图片大小,当然大家还是会疑惑，为什么会出现这样的效果，其中还有个默认的属性background-image:repeat重复，我们设置的图片只有40px, 40px这样只会产生一个图片，只有进行重复才能形成上面的效果，也许大家会疑惑，为什么要设成40px 40px进程条的高度至于20px，可不可以写成20px 20px,答案可以告诉大家，肯定可以，但是并不美观，大家可以思考思考。
linear-gradient便是讲到这里，可能其中存在什么缺陷，我日后会进行修改更新。
---------------------
作者：77458
来源：CSDN
原文：https://blog.csdn.net/qq_18661257/article/details/50640633
版权声明：本文为博主原创文章，转载请附上博文链接！
以上是关于linear-gradient()图像渐变属性详解的主要内容，如果未能解决你的问题，请参考以下文章