CSS属性之线性渐变实现透明度渐变和重复渐变效果

线性渐变是css中常用的渐变效果，除了普通的线性渐变效果，还可以通过它实现透明渐变和重复渐变的效果

1.透明渐变

使用线性渐变实现透明渐变的效果需要使用到rgba方法来调整颜色值。

语法格式:

background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1),url(图片路径))

如上所示，改代码表示的内容是实现线性的透明渐变效果，to right定义的是渐变方向表示从左到右渐变，除了to right(向右渐变) 还有to left(向左渐变) to top(向上渐变) to bottom(向下渐变)。定义完渐变方向之后，就可以定义颜色值了，颜色值的定义最少要有两个。这里的颜色值的定义都是采用rgb的方式进行定义。rgb的参数是三个值，后面的0和1表示透明程度。0表示完全透明 1表示完全不透明。设置完颜色值之后，就插入图片。

注意:透明渐变的实现类似于ps中的蒙版，颜色的设置必须在图片的前面，才能达到一个遮住的效果，才会有朦胧的透明感，如果将图片设置在颜色值的前面，那么就无法起到渐变的效果！！！

如图所示，实现了一个从左到右的线性渐变的效果，左边是完全透明，所以下一层的图片就完整的显示出来了，右边是完全不透明，所以就会被设置的颜色值给遮住，从左到右就呈现出了一个整体的透明渐变的效果

当然，这种透明渐变效果还是过于简单，缺乏整体的美感，为此，css中的线性渐变属性还有重复渐变效果

2.重复渐变

语法格式:

repeating-linear-gradient(to right,#43a1d5,#43a1d5 20px,#ffffff 20px,#ffffff 40px)
/*如上所示，通过repeating-linear-gradient方法来实现重复的线性渐变的定义
然后先定义渐变方向 之后定义渐变的颜色，因为是重复的线性渐变，所以要设置各元素所占的空间 当一个元素占完这个空间之后 就到下一个颜色 如此循环直到占满整个容器*/

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.container{/*设置容器大小*/width: 300px;height: 300px;border: 1px solid red;/*设置重复的线性渐变效果*/background: repeating-linear-gradient(to right,#43a1d5,#43a1d5 20px,#ffffff 20px,#ffffff 40px);
/*这里设置的效果表示 从左往右实现重复渐变 第一个元素是#43a1d5 直到这个颜色值占满20px的空间 就到下一个颜色#ffffff 这个颜色同样占20px的空间 但是第一个出现的地方在20px 即第一个颜色值的结束位置 以此重复 直到占满整个容器*/}</style></head><body><div class="container"></div></body>
</html>

最终效果图如下

注意：在使用重复线性渐变的效果的时候，一定要记得定义容器的大小，否则只是一个div标签的话是无法显示效果的。还有第一个颜色值的结束位置就是下一个颜色值的开始位置。颜色值和所占的空间设置使用空格隔开各个颜色值之间使用逗号隔开方向的设定与颜色值的设定两者之间也是使用逗号隔开。颜色值可以设置多个，但是最少要有两个才能达到重复线性渐变的效果

CSS属性之线性渐变实现透明度渐变和重复渐变效果相关推荐

实现兼容各浏览器的背景渐变，透明度渐变，色彩渐变
http://www.colorzilla.com/gradient-editor/ 打开这个网站,输入自己想要的参数,就可以在线生成兼容性的渐变了. 不过请注意,因为filter是覆盖在元素之上的, ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
CSS3渐变属性：线性渐变和径向渐变用法教程
在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现.而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果.CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程 ...
html如何把图片填充颜色渐变,css图片怎么设置透明度渐变？
css可以在设置图片颜色时使用linear-gradient()函数设置渐变,其中渐变颜色使用rgba()设置即可设置图片透明度渐变. linear-gradient() 函数用于创建一个线性渐变的 ...
html中图片透明度渐变效果,css怎么设置透明度渐变？
css怎么设置透明度渐变?下面本篇文章给大家介绍一下使用CSS设置透明度渐变效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么设置透明度渐变? 在CSS中可以使用 ...
C语言调色板颜色渐变,【多选题】使用调色板可以对矢量图添加什么变化? A. 纯色 B. 线性渐变 C. 径向渐变 D. 透明度 E. 位图填充...
[多选题]使用调色板可以对矢量图添加什么变化? A. 纯色 B. 线性渐变 C. 径向渐变 D. 透明度 E. 位图填充更多相关问题分式方程xx-1=32x-2-2的解是()A．76B．-16C． ...
CSS应用：线性渐变
渐变是从一种颜色逐渐蜕变到另一种颜色.线性渐变就是沿着一根轴线(水平.垂直或某个角度)改变颜色,从起点到终点颜色进行顺序渐变. 在这里,我将介绍在CSS中怎么实现线性渐变的方法. 线性渐变创建线性渐 ...
html5彩虹色填充,使用css技术的线性渐变来设计彩虹
在网页设计中,有时候会需要用到渐变效果,渐变可以创建出类似于彩虹的视觉图案效果,在没有CSS3之前,为了显示一个渐变需要专门制作一个图片,这种不法不但不灵活还增加请求数,而CSS3可以轻松实现网页渐变 ...
CSS 3种渐变效果（线性渐变，径向渐变，圆锥型渐变）
1 linear-gradient(线性渐变) 1.1按方向渐变语法: background: linear-gradient(direction, color-stop1, color-stop2 ...
css新特性：线性渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)
线性渐变线性渐变重复性线性渐变径向渐变重复性径向渐变的使用线性渐变线性渐变是向下.向上.向左.向右.对角方向的颜色渐变. 其语法格式为: background-image: linear- ...

CSS属性之线性渐变实现透明度渐变和重复渐变效果

CSS属性之线性渐变实现透明度渐变和重复渐变效果相关推荐

最新文章

热门文章