css图片渐变遮罩

CSS 图片渐变遮罩基础概念

CSS 图片渐变遮罩是一种使用 CSS 渐变效果来改变图片显示效果的技术。通过在图片上叠加一个渐变层，可以实现多种视觉效果，如模糊、透明度变化等。

类型

线性渐变：沿着一条直线方向逐渐变化颜色。
径向渐变：从一个中心点向外逐渐变化颜色。
重复线性渐变：沿着一条直线方向重复变化颜色。
重复径向渐变：从一个中心点向外重复变化颜色。

应用场景

图片过渡效果：在图片切换时使用渐变遮罩，可以实现平滑的过渡效果。
图片透明度变化：通过渐变遮罩可以控制图片的透明度，实现部分透明效果。
背景渐变：在网页背景中使用渐变遮罩，可以增加视觉吸引力。

示例代码

以下是一个使用 CSS 线性渐变遮罩的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 渐变遮罩示例</title>
    <style>
        .image-container {
            position: relative;
            width: 300px;
            height: 200px;
        }
        .image-container img {
            width: 100%;
            height: 100%;
        }
        .gradient-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://via.placeholder.com/300x200" alt="示例图片">
        <div class="gradient-mask"></div>
    </div>
</body>
</html>

参考链接

MDN Web Docs - CSS 渐变

常见问题及解决方法

问题：渐变遮罩没有生效

原因：

CSS 选择器错误，导致渐变遮罩没有被正确应用。
渐变遮罩的层叠顺序不正确，导致被其他元素覆盖。

解决方法：

检查 CSS 选择器是否正确，确保渐变遮罩能够正确选中目标元素。
确保渐变遮罩的 z-index 值足够高，或者将其放置在目标元素的上层。

.gradient-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    z-index: 1; /* 确保遮罩层在最上层 */
}

通过以上方法，可以解决大多数 CSS 图片渐变遮罩相关的问题。