CSS 颜色渐变图像渐变

最新推荐文章于 2025-05-29 21:40:53 发布

weixin_30898109

最新推荐文章于 2025-05-29 21:40:53 发布

阅读量386

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/blackfriday/p/8823265.html

本文介绍了如何使用CSS的linear-gradient属性来创建不同方向的渐变背景效果，包括向下、向右、向右下角以及指定角度的渐变，并展示了如何通过透明度设置实现背景图片的淡入淡出效果。

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


向下渐变：
background: linear-gradient(to bottom, blue, white);

向右渐变：
background: linear-gradient(to right, blue, white);

向右下角渐变：
background: linear-gradient(to bottom right, blue, white);

角度渐变：
background: linear-gradient(70deg, red, white);

角度是指水平线与渐变线之间的角度，以顺时针方向旋转。总之，0deg 创建一个从底部到顶部的垂直渐变，当变成90deg时生成一个从左到右的水平渐变。

图像渐变：

渐变是支持透明度的。 举个例子，当你叠加多个背景层，你可以使用这个在背景图片上来创建淡入淡出的效果 :
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

for Transparency and gradients example