linear-gradient()图像渐变属性详解

时间 2019-12-07

标签 linear gradient 图像渐变属性详解繁體版

原文原文链接

http://www.javashuo.com/article/p-uimdtifv-mq.htmlcss

对于linear-gradient()我学习的时候，查了不少资料，可是发现不论是网上仍是一些书籍，都没有将这个属性的运用讲得明白，清楚，对此，我写了这篇博客，虽然不能保证每一位读者都可以看懂，可是也但愿这篇博客能为你提供一些帮助，若有问题，请在博客中提出，谢谢。html

首先给你们讲的就是兼容性，在IE浏览器中这个属性的设置是不兼容的，固然在IE浏览器中也能够实现相似的效果，那边是滤镜(fliter)的做用了.其余的不一样的浏览器也是有不一样的，好比chrome通常要加-webkit-前缀，如：-webkit-linear-gradient，好比opera就是-o-linear-gradient。web

linear-gradient是属于CSS3中Gradient中的两个属性一个，这两个属性分别为linear-gradient（线性渐变）和radial-gradient（径性渐变）,其中linear-gradient线性渐变呈现线性变化，你们一看名称就能够知道这至关因而直线变化，好比充左上角到右下角的变化，或者从上到下，而radial-gradient径性渐变呈现径性变化，这即是你们常常见到的圆圈渐变效果，从图像的中间向四周进行变化，像是你们仍块石头到河里荡起的涟漪同样。而本片博客则是讲解linear-gradient,固然，linear-gradient和radial-gradient是相通的，他的使用方法同样，则是呈现的效果不一样而已。chrome

以下是简单的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>spa

效果:.net

这里提到了background-image:对这个属性进行linear-gradient,简单的说这个linear-gradient设置是针对图片的，因此必须是放图片的属性才能运用这个linear-gradient进行设置.htm

除了以上的角度使用(40deg),除此以外，还有提供的一些相似于C语言中的常量的东西,以下:blog

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,答案能够告诉你们，确定能够，可是并不美观，你们能够思考思考。