利用background-image实现线性渐变

最新推荐文章于 2025-06-05 00:15:09 发布

贝塔贝卡贝

最新推荐文章于 2025-06-05 00:15:09 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/111159009

本文介绍如何使用CSS的linear-gradient()属性来创建不同方向的渐变背景效果，包括自上而下、自左而右及自右而左的渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS:background-image

属性值：linear-gradient() 创建一个线性渐变的 “图像”(从上到下)

<div class="container">
			
</div>

实现效果一：自上而下渐变

.container{
	width: 100%;
	height: 150px;
    background-image: linear-gradient(rgba(0,0,0,.7),rgba(255,0,0,.5),rgba(24,77,0,.9),rgba(0,0,0,.1)); 
/* background-image: -webkit-linear-gradient(left,rgba(0,0,0,.7),rgba(255,0,0,.5),rgba(24,77,0,.9),rgba(0,0,0,.1)); */
background-image: linear-gradient( to left,rgba(0,0,0,.7),rgba(255,0,0,.5),rgba(24,77,0,.9),rgba(0,0,0,.1));	
}

在这里插入图片描述
实现效果二：自左而右渐变
注意点：由于兼容性问题，需要兼容性写法：-webkit-linear-gradient

.container{
	width: 100%;
	height: 150px;
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.7),rgba(255,0,0,.5),rgba(24,77,0,.9),rgba(0,0,0,.1));
background-image: linear-gradient( to left,rgba(0,0,0,.7),rgba(255,0,0,.5),rgba(24,77,0,.9),rgba(0,0,0,.1));	
}

在这里插入图片描述
实现效果三：自右而左渐变

.container{
	width: 100%;
	height: 150px;
	background-image: linear-gradient( to left,rgba(0,0,0,.7),rgba(255,0,0,.5),rgba(24,77,0,.9),rgba(0,0,0,.1));	
}