CSS实现元素颜色渐变效果

最新推荐文章于 2024-04-24 10:32:12 发布

大雷！

最新推荐文章于 2024-04-24 10:32:12 发布

阅读量982

点赞数

文章标签： CSS实现元素背景颜色渐变效果

本文链接：https://blog.csdn.net/dalei9243/article/details/107963245

版权

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

最低0.47元/天解锁文章

大雷！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现元素颜色渐变效果

CSS设定元素颜色渐变背景: 业务UI要求某个界面的图显要按要求显示,但是没有提供icon图.但是图像组成类似渐变效果.因此决定用渐变效果实现该功能.问题: 如何实现元素的颜色渐变?解决办法: 用background-image: linear-gradient(#1, #2)实现. 参数说明: 指令中的参数应该是三个,按照上面的语法能够实现三种颜色的渐变效果. 但是由于当前的业务场景中只有暗色到亮色的颜色转变,因此此处只设定两个参数. 具体的实现效果下面通过Demo代码体现..
复制链接

扫一扫