css3颜色淡化-html中div背景颜色渐变（透明对角线带颜色查询对照表）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

透明渐变效果图

源代码

<style>
  #grad1 {
	<!--height: 100px;-->
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>

<div id="grad1"></div>

如果你不喜欢这个颜色，还有（渐变蓝）

背景图像：线性渐变（向右，rgba（255,0,0,0），rgba（16,33,106,1））；

测试时，请恢复我注释掉的高值。 如果您想自己使用css3颜色淡化，请根据需要设置较高的值。

使用角度：

如果您想更好地控制渐变的方向，您可以定义一个角度而不是预定义的方向（到底部、到顶部、到右侧、到左侧、到右下角等）

rgba() 函数中的最后一个参数可以是 0 到 1 之间的值，定义颜色的透明度：0 表示完全透明css3颜色淡化，1 表示完全不透明。

对角渐变效果图

源代码

<style>
#grad2 {
  <!--height: 100px;-->
  background-image: linear-gradient(80deg, #20B2AA, #1C86EE); 
}
</style>

<div id="grad2" style="text-align:center;"></div>

奖金

详细教程请参考：

渐变色设计思路：

通用调色板：

推荐另一位博主的CSDN博文（新手可以直接复制）：