先通过CSS实现背景渐变与图片叠加以增强视觉层次和文字可读性。1. 使用background属性将线性渐变置于图片前，实现从上到下的透明黑到深灰渐变覆盖图片；2. 采用radial-gradient创建中心聚焦效果，并通过background-blend-mode控制颜色融合；3. 利用多层背景逗号分隔，按顺序堆叠多个渐变与图片，如底部深色渐变遮罩便于文字展示。关键在于掌握堆叠顺序与透明度控制。
在网页设计中，背景渐变与图片叠加是一种常见的视觉增强手法。它能让图片更具层次感，同时提升文字的可读性。通过CSS，我们可以轻松实现这种效果，无需依赖图像编辑工具。
使用线性渐变叠加图片
通过background属性将线性渐变和图片结合，渐变写在图片之前，浏览器会从前往后叠加显示。
示例代码：
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
url('bg.jpg');
background-size: cover;
background-position: center;
height: 400px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
立即学习“前端免费学习笔记（深入）”；
说明：先应用从半透明黑到深灰的渐变，再叠加背景图。这样文字放在容器中会更清晰。
径向渐变与图片融合
如果你想要中心聚焦的效果，可以用radial-gradient。
示例：
.banner {
background: radial-gradient(circle at center, rgba(255, 0, 0, 0.4), transparent),
url('landscape.jpg');
background-size: cover;
background-blend-mode: overlay;
}
background-blend-mode控制图层混合方式，常用值如overlay、multiply能让颜色更自然融合。
多层背景灵活控制
CSS支持多个背景图和渐变叠加，用逗号分隔，顺序决定层级（前面的在上）。
比如创建一个底部深色遮罩，便于放置文字：
.card {
background: linear-gradient(to top, #000, transparent 80%),
url('photo.jpg');
background-size: cover, cover;
background-position: bottom, center;
}
这个技巧常用于卡片组件，让底部不被文字覆盖。
基本上就这些。关键是理解背景的堆叠顺序和合理使用透明度。不复杂但容易忽略细节。
