移动端网页图片叠加可复制文本失效问题排查与修复

针对在移动端图片上添加可复制文本的需求，结合当前代码存在的问题，给出以下修复方案：

核心问题分析 #

当前代码中content-layer的z-index为-15，虽高于背景层，但移动端环境下负层级元素的触摸事件易被浏览器优先拦截；同时缺少webkit内核移动端的文本选中前缀属性，导致长按文本无法触发选中操作。

具体修复步骤 #

1. 调整内容层层级
   将.content-layer的z-index从-15改为1，确保内容层处于页面最上层，触摸事件能被正确识别：

.content-layer {
  text-align: center;
  z-index: 1; /* 修改为正数层级 */
}

2. 增强文本选中的移动端兼容性
   给.text-overlay添加webkit前缀属性，并补充触摸提示，确保移动端长按能触发文本选中：

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  text-align: center;
  user-select: text;
  -webkit-user-select: text; /* 适配webkit内核移动端浏览器 */
  -webkit-touch-callout: text; /* 禁止弹出默认长按菜单，只允许文本选中 */
  pointer-events: auto;
  cursor: text; /* 提示用户这是可选中文本 */
  padding: 8px 12px; /* 扩大触摸区域，提升移动端交互体验 */
}

3. 保留图片的事件禁用
   继续保留image-container img的pointer-events:none，避免长按触发图片的复制/下载操作。

修改后的完整代码 #

CSS代码

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Resetting default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100%;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Add your styles for text fields and content layer here */
.content-layer {
  text-align: center;
  z-index: 1; /* 修改层级为正数 */
}

.image-container {
  top: 180px;
  position: relative;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* 添加间距，避免元素重叠 */
}

.image-container img {
  scale: 0.9;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* 保留禁用图片事件 */
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  text-align: center;
  user-select: text;
  -webkit-user-select: text; /* 适配移动端webkit */
  -webkit-touch-callout: text; /* 禁止默认长按菜单 */
  pointer-events: auto;
  cursor: text;
  padding: 8px 12px; /* 扩大触摸区域 */
}

/* General background layer styles */
.background-layer {
  position: absolute;
  width: 100%;
  height: 100%;
}

#bgsupportnewmobile_png {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background-image: url('../gifs/dmfmfd.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: -16;
}

#bgsupportnewmobiletlo_png {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1080px;
  height: 1920px;
  background-image: url('../gifs/mobilka.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: -17;
}

HTML代码

<div id="bgsupportnewmobile_png" class="background-layer"></div>
<div id="bgsupportnewmobiletlo_png" class="background-layer"></div>

<div id="content" class="content-layer">
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    <div class="text-overlay">
      可复制文本示例1
    </div>
  </div>
  
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    <div class="text-overlay">
      可复制文本示例2
    </div>
  </div>
  
  <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Your Image">
    <div class="text-overlay">
      可复制文本示例3
    </div>
  </div>
</div>

效果验证 #

修改后，在移动端长按文本区域，将只会触发文本选中复制，不会触发图片的下载/复制操作；同时文本的触摸区域扩大，提升了移动端的交互体验。

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