• 技术文章 >web前端 >css教程

    css怎么实现不透明度渐变

    青灯夜游青灯夜游2021-07-22 11:59:51原创85

    css中可使用linear-gradient()或radial-gradient()渐变函数配合rgba()来设置不透明度渐变。linear-gradient()和radial-gradient()可设置渐变,而rgba()可控制不透明度。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在css中,可以使用linear-gradient()或radial-gradient()渐变函数配合rgba()来设置不透明度渐变。

    linear-gradient()和radial-gradient()函数可以设置渐变效果:

    rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

    代码示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>图片透明度渐变实例演示</title>
    		<style>
    			div{
    				box-sizing: border-box;
    				width: 400px;
    				height: 320px;
    				font-size: 22px;
    				padding-top: 100px;
    				overflow: hidden;
    				background: no-repeat center top / 100% 100%;
    			}
    			.div1 { 
    				background-image: url(img/1.jpg)
    			}
    			.div2 {
    				background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/1.jpg)
    			}
    			.div3 {
    				background-image: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 1)), url(img/1.jpg)
    			}
    			
    		</style>
    		<div class="div1">正常图片</div><br>
    		<div class="div2">设置线性渐变不透明度效果的图片</div>
    		<div class="div3">设置径向渐变不透明度效果的图片</div>
    		</body>
    
    </html>

    效果图:

    1.png

    2.png

    说明:

    为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。语法如下:

     background-image:linear-gradient(direction, color-stop1, color-stop2, ...);

    示例:

    1.png

    径向渐变由它的中心定义。

    为了创建一个径向渐变,你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

    语法:

     background-image:radial-gradient(shape size at position, start-color, ..., last-color);

    示例:

    2.jpg

    (学习视频分享:css视频教程

    以上就是css怎么实现不透明度渐变的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 不透明度 渐变
    上一篇:css写法怎么优化 下一篇:css高度设置百分比不生效怎么办
    第16期线上培训班

    相关文章推荐

    • 详解纯CSS实现文字渐变色的两种方式• css背景图片怎么设置透明度渐变• css中哪个属性表示径向渐变• css怎么设置字体颜色渐变• CSS如何实现渐变提示框(tooltips)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网