如何使用CSS为背景图片添加从下到上的渐变效果

实现方案 #

你不需要修改原有HTML结构，仅需调整CSS的background属性，通过CSS多重背景特性将线性渐变遮罩叠加在背景图上方即可实现效果。

调整后CSS代码

header{  
   /* 渐变层在前，背景图在后，用逗号分隔 */
   background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) no-repeat, url('/test/header.jpg') no-repeat;
   min-height: 132px;
   background-size: cover;
}

参数说明

• to top 指定渐变方向为从下到上，匹配需求
• 渐变中的两个色标分别控制底部和顶部的遮罩效果：第一个色标对应元素底部的颜色和透明度，第二个对应顶部的颜色和透明度，你可以根据实际显示效果调整RGB颜色值和透明度数值（透明度取值范围0到1，0为完全透明，1为完全不透明）
• 如果你需要的是底部变暗的渐变效果，将渐变的RGB值调整为黑色即可，示例：linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0))

内容的提问来源于stack exchange，提问作者Priya