如何实现响应式水印？移动端水印过大问题技术求助

问题核心在于你用固定像素值设置水印尺寸：background-size: 100px 100px，在移动端小尺寸的图片容器里，固定大小的水印占比自然过高，几乎覆盖缩略图。以下是几种针对性的解决方案：

方案1：使用相对百分比适配容器 #

把水印尺寸改成相对于父容器的百分比，让水印随容器大小自动缩放，同时位置也用百分比保持比例：

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://i.imgur.com/5GQA67n.png");
  background-size: 25% 25%; /* 水印尺寸为容器的25%，可按需调整 */
  background-position: 8% 8%; /* 相对位置保持一致 */
  background-repeat: no-repeat;
  opacity: 0.7;
}

方案2：限制水印最大尺寸（兼顾大屏和小屏） #

如果不想让大屏上的水印太小，同时避免小屏上水印过大，可以结合max-width/max-height和相对单位：

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://i.imgur.com/5GQA67n.png");
  background-size: auto 25%; /* 高度占容器25%，宽度自动保持比例 */
  max-width: 100px; /* 水印最大宽度不超过100px */
  max-height: 100px; /* 水印最大高度不超过100px */
  background-position: 30px 30px;
  background-repeat: no-repeat;
  opacity: 0.7;
}

小屏上水印按比例缩小，大屏上不会超过设定的最大尺寸，兼顾不同设备体验。

方案3：媒体查询针对性调整 #

针对不同屏幕宽度单独设置水印参数，精准控制移动端显示：

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("https://i.imgur.com/5GQA67n.png");
  background-size: 100px 100px;
  background-position: 30px 30px;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* 针对手机屏幕（可根据实际断点调整max-width数值） */
@media (max-width: 768px) {
  .watermarked:after {
    background-size: 60px 60px; /* 缩小移动端水印尺寸 */
    background-position: 15px 15px; /* 同步调整位置 */
  }
}

额外提示 #

确保图片在移动端正确缩放，给图片添加以下样式：

.watermarked img {
  max-width: 100%;
  height: auto;
}

这样图片容器会随屏幕宽度适配，水印的缩放也会更准确。

内容的提问来源于stack exchange，提问作者Covadola