H5 中怎么使用 CSS 渐变实现图像底部的黑色渐变阴影遮罩-H5教程-PHP中文网

可用linear-gradient实现图片底部黑色渐变遮罩：优先用background-image叠加（渐变在前、to top），或伪元素::after绝对定位覆盖；需控制透明度过渡、适配响应式与圆角。

h5 中怎么使用 css 渐变实现图像底部的黑色渐变阴影遮罩

在 H5 页面中，可以用 CSS 的 linear-gradient 覆盖在图片上，实现图像底部的黑色渐变遮罩（常用于文字叠加时提升可读性）。关键在于用半透明黑色从下往上渐变，叠加在图片之上，且不破坏图片结构。

使用 background-image 叠加渐变层

最常用、语义清晰的方式：把图片作为背景，再叠加一层渐变背景。适用于 div 或其他容器元素：

设置容器尺寸与图片一致（如通过 aspect-ratio 或固定宽高）
用 background-image 同时声明图片和渐变，用逗号分隔，**渐变写在前面**（图层更上层）
渐变方向设为 to top，确保黑色从底部向上消退

示例代码：

.img-with-shadow {
  width: 100%;
  aspect-ratio: 16/9;
  background-image: 
    linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.05) 60%, transparent),
    url('your-image.jpg');
  background-size: cover;
  background-position: center;
}

用伪元素 ::after 实现（适合 img 标签）

当必须保留原生 <img> 标签（如需 SEO、懒加载或响应式 srcset）时，可用父容器 + ::after 绝对定位覆盖：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

父容器设 position: relative，display: inline-block 或指定尺寸
img 设 display: block 避免底部留白
::after 设绝对定位，全尺寸覆盖，用 linear-gradient(to top, ...) 实现渐变

HTML 结构：

<div class="img-container">
  @@##@@
</div>

CSS：

.img-container {
  position: relative;
  display: inline-block;
}
.img-container img {
  display: block;
  width: 100%;
  height: auto;
}
.img-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%; /* 渐变覆盖高度，可调 */
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  pointer-events: none; /* 确保不拦截点击事件 */
}