在移动浏览器、Chrome 和 Safari 上不工作的标题标签隐藏溢出。仅适用于桌面浏览器

Question

screenshots of desktop working vs. mobile not working

我有一个代码 sn-p 来显示我正在尝试做的事情。我故意为包含幻灯片的 div 内的标题设置了更宽的宽度。我希望标题的宽度被图像的圆形边缘剪裁。我在桌面浏览器上有类似的工作，但它不会在我的 iphone 上的 Safari 或 Chrome 中呈现。我已经设置了溢出：隐藏到父 div，它确实像我想要的那样隐藏了标题的外部部分。但我无法让它在移动设备上正确呈现。 （注意：overflow hidden 将所有内容都隐藏在了 sn-p 中，我也不确定那里发生了什么）。

我研究过类似的问题，但这些问题似乎是在处理有关整个页面正文的溢出问题。

div {
   position: relative;
   /* overflow: hidden; */
}
h3 {
   margin: 0;
   z-index: 4;
   width: 300px;
   height: 20px;
   position: absolute;
	/* top: 150px; */
	bottom: 0;
	left: 0;
	right: 0;
  background-color: yellow;
  text-align: center;
}
img {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 3;
   animation: slideshow 12s linear 0s infinite;
   border-radius: 25px;
}

img:nth-child(2) {
   z-index: 2;
   animation-delay: 4s;
}

img:nth-child(3) {
   z-index: 1;
   animation-delay: 8s;
}

@keyframes slideshow {
   25% {
      opacity: 1;
   }
   33.33% {
      opacity: 0;
   }
   91.66% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

<div>
<h3>Slideshow</h3>
<img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" />
<img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" />
<img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" />
</div>

Answer 1

我现在看到您添加了图像。你有一个保证金问题。 h3 元素添加边距。如果您在 h3 样式中添加 'margin: 0'，您将看到会发生什么。还有一件事，你需要删除'top：150px;'。 下次你必须放一些工作代码。在您添加的示例中，您看不到任何东西，至少您向主 div 添加了一个高度值。