css图片加水印

基础概念

CSS图片加水印是指在网页上显示的图片上叠加一层透明的文字或图像，以保护版权或标识来源。这种技术通常通过CSS的::before或::after伪元素来实现。

类型

文字水印：在图片上添加文字。
图像水印：在图片上叠加图像。

应用场景

网站图片：保护网站上的图片不被非法使用。
社交媒体：在分享图片时添加个人或品牌标识。
电子商务：保护产品图片的版权。

实现方法

以下是一个使用CSS实现文字水印的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Watermark</title>
    <style>
        .watermarked-image {
            position: relative;
            display: inline-block;
        }

        .watermarked-image::after {
            content: "Watermark";
            position: absolute;
            top: 10px;
            left: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 20px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="watermarked-image">
        <img src="path/to/your/image.jpg" alt="Sample Image">
    </div>
</body>
</html>

可能遇到的问题及解决方法

水印位置不准确：
- 原因：可能是由于position属性设置不当。
- 解决方法：调整top、bottom、left、right属性，确保水印位置正确。

水印透明度不合适：
- 原因：可能是由于opacity或rgba颜色值设置不当。
- 解决方法：调整rgba颜色值中的透明度参数，使其达到预期效果。
水印覆盖图片内容：
- 原因：可能是由于水印位置设置不当，覆盖了图片的重要部分。
- 解决方法：调整水印的位置，确保不会遮挡图片的关键内容。