HTML图片加水印怎么调整位置_HTML图片加水印调整位置的详细方法

<div class="image-with-watermark">
    <img src="your-image.jpg" alt="Description of image">
    <span class="watermark">你的水印文本或图标</span>
</div>

.image-with-watermark {
    position: relative; /* 父容器相对定位，为子元素（水印）的绝对定位提供参考 */
    display: inline-block; /* 或者 block，取决于你希望图片容器如何与其他元素布局 */
    /* 如果图片是块级元素，可以省略 display: inline-block; */
}

.image-with-watermark img {
    max-width: 100%; /* 确保图片响应式 */
    height: auto;
    display: block; /* 移除图片底部可能存在的空白 */
}

.watermark {
    position: absolute; /* 水印绝对定位，相对于其最近的已定位父元素（即 .image-with-watermark） */
    color: rgba(255, 255, 255, 0.6); /* 水印颜色，带透明度 */
    font-size: 20px;
    font-weight: bold;
    pointer-events: none; /* 确保水印不阻挡鼠标事件，例如点击图片 */
    white-space: nowrap; /* 防止文本水印自动换行 */
    z-index: 10; /* 确保水印在图片之上 */

    /* 调整水印位置的示例 */
    /* 1. 右下角 */
    bottom: 10px;
    right: 10px;

    /* 2. 左上角 */
    /* top: 10px; */
    /* left: 10px; */

    /* 3. 居中 */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); /* 精确居中，相对于自身大小偏移 */

    /* 4. 底部居中 */
    /* bottom: 10px; */
    /* left: 50%; */
    /* transform: translateX(-50%); */

    /* 5. 也可以是图片作为背景，水印直接在父容器里 */
    /* 如果水印是图片，使用 background-image */
    /* background-image: url('watermark.png'); */
    /* background-repeat: no-repeat; */
    /* background-position: center center; */
    /* background-size: contain; */
    /* width: 100%; */
    /* height: 100%; */
    /* opacity: 0.3; */
    /* top: 0; */
    /* left: 0; */
}

.watermark {
    /* ...其他样式 */
    bottom: 2%; /* 距离底部2% */
    right: 2%;  /* 距离右侧2% */
    /* 如果水印内容较多，可能需要微调 */
    /* transform: translate(5px, 5px); /* 额外的像素级微调 */
}

@media (max-width: 768px) {
    .watermark {
        font-size: 14px; /* 手机上水印字体小一点 */
        bottom: 5px; /* 手机上距离边缘更近 */
        right: 5px;
    }
}

@media (min-width: 1200px) {
    .watermark {
        font-size: 24px; /* 大屏幕上水印字体大一点 */
        bottom: 20px;
        right: 20px;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const imgContainer = document.querySelector('.image-with-watermark');
    const img = imgContainer.querySelector('img');
    const watermark = imgContainer.querySelector('.watermark');

    function adjustWatermarkPosition() {
        // 等待图片完全加载，获取其真实尺寸
        if (img.complete) {
            const imgWidth = img.offsetWidth;
            const imgHeight = img.offsetHeight;

            // 示例：将水印放置在图片右下角，距离边缘10%
            const watermarkRight = imgWidth * 0.1;
            const watermarkBottom = imgHeight * 0.1;

            watermark.style.right = `${watermarkRight}px`;
            watermark.style.bottom = `${watermarkBottom}px`;
            // 或者，如果你想居中：
            // watermark.style.left = `${imgWidth / 2}px`;
            // watermark.style.top = `${imgHeight / 2}px`;
            // watermark.style.transform = 'translate(-50%, -50%)';
        } else {
            img.onload = adjustWatermarkPosition; // 图片未加载完成，等待加载
        }
    }

    adjustWatermarkPosition(); // 页面加载时执行一次
    window.addEventListener('resize', adjustWatermarkPosition); // 窗口大小改变时重新调整
});

<div class="image-with-watermark">
    <img src="your-image.jpg" alt="Description of image">
    <svg class="watermark-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
        <text x="50" y="50" font-family="Arial" font-size="10" fill="rgba(255,255,255,0.5)" text-anchor="middle" dominant-baseline="middle" transform="rotate(-45 50 50)">你的SVG水印</text>
    </svg>
</div>

.watermark-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* SVG会填充父容器 */
    height: 100%;
    pointer-events: none;
    z-index: 10;
}