css背景图片如何设置透明度渐变

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

css中,可以利用线性渐变()和rgba()函数实现图片的透明度渐变,语法”背景图片:线性渐变(rgba(. .)前,rgba (. .), url (. .)”。

本教程操作环境:windows7多系统,CSS3&, HTML5版,戴尔G3电脑。

<强> css背景图片设置透明度渐变

在css中,可以利用线性渐变()和rgba()函数实现图片的透明度渐变

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt; meta  charset=癠TF-8"祝辞 　　& lt; title>图片透明度渐变实例演示& lt;/title> 　　& lt; style> 　　.div1  { 　　box-sizing: border-box; 　　宽度:400 px; 　　身高:240 px; 　　字体大小:22 px; 　　padding-top: 100 px; 　　溢出:隐藏; 　　背景:,no-repeat  center  top /, 100%, 100%; 　　背景图片:url (img/3. jpg) 　　} 　　.div2  { 　　box-sizing: border-box; 　　宽度:400 px; 　　身高:240 px; 　　字体大小:22 px; 　　padding-top: 100 px; 　　溢出:隐藏; 　　背景:,no-repeat  center  top /, 100%, 100%; 　　背景图片:线性渐变(用上面,rgba (255,, 255,, 255,, 1),, rgba (255,, 255,, 255,, 0)),, url (img/3. jpg) 　　} 　　 　　 　　& lt;/style> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; p>原图:& lt;/p> 　　& lt; div 类=癲iv1"祝辞& lt;/div> 　　& lt; p>透明度渐变:& lt;/p> 　　& lt; div 类=癲iv2"祝辞& lt;/div> 　　& lt;/body> 　　 　　& lt;/html>

效果图:

说明:

<>强线性梯度()函数用于创建一个线性渐变的“图像“。

为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让壁虎去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。

css语法:

背景:,线性渐变(color-stop1,方向,还以为,color-stop2,…), <李>

方向,,用角度值指定渐变的方向(或角度)。

<李>

color-stop1, color-stop2,……,,用于指定渐变的起止颜色。

<强>在线性梯度()函数中使用rgba即可设置透明度渐变。

rgba的意思是(Red-Green-Blue-Alpha)它是在RGB上扩展包括了“阿尔法”通道,运行对颜色值设置透明度。

语法:

rgba(红色,绿色,蓝色,,α) <李>

红,,定义红色值,取值范围为0 ~ 255,也可以使用百分比0% ~ 100%。

<李>

绿色,,定义绿色值,取值范围为0 ~ 255,也可以使用百分比0% ~ 100%。

<李>

蓝色,,定义蓝色值,取值范围为0 ~ 255,也可以使用百分比0% ~ 100%。

<李>

α-透明度,,定义透明度0(完全透明)~ 1(完全不透明)

关于“css背景图片如何设置透明度渐变”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

css背景图片如何设置透明度渐变