CSS实现元素颜色渐变效果

程序员文章站 2022-05-28 14:27:09

...

CSS设定元素颜色渐变

背景:
	业务UI要求某个界面的图显要按要求显示,但是没有提供icon图.但是图像组成类似渐变效果.
因此决定用渐变效果实现该功能.

问题:
	如何实现元素的颜色渐变?

解决办法:
	用background-image: linear-gradient(#1, #2)实现.
	参数说明: 指令中的参数应该是三个,按照上面的语法能够实现三种颜色的渐变效果.
		但是由于当前的业务场景中只有暗色到亮色的颜色转变,因此此处只设定两个参数.
	具体的实现效果下面通过Demo代码体现.如下:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS实现DIV层背景颜色渐变</title>
	<style type="text/css">
		.change{
			 width:100%;
			 height:600px;
		    background-image: linear-gradient(#F8E7BD, #E89831);

		    /**
		     * 也可以是三种入参,颜色从上到下依次由red到yellow转换,yellow
		     * 到blue转换.
		     */
		    /** background-image: linear-gradient(red, yellow, blue); */
		 }
	</style>
</head>
<body>
	<div class="change"></div>
</body>
</html>