html - 在移动浏览器、Chrome 和 Safari 上不工作的标题标签隐藏溢出。仅适用于桌面浏览器
问题描述
我有一个代码片段来显示我正在尝试做的事情。我故意为包含幻灯片的 div 内的标题设置了更宽的宽度。我希望标题的宽度被图像的圆形边缘剪裁。我在桌面浏览器上有类似的工作,但它不会在我的 iphone 上的 Safari 或 Chrome 中呈现。我已经设置了溢出:隐藏到父 div,它确实像我想要的那样隐藏了标题的外部部分。但我无法让它在移动设备上正确呈现。(注意:溢出隐藏隐藏了片段中的所有内容,我也不确定那里发生了什么)。
我研究过类似的问题,但那些似乎是在处理有关整个页面正文的溢出问题。
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>
解决方案
我现在看到你添加了图像。你有一个保证金问题。h3 元素添加边距。如果您在 h3 样式中添加 'margin: 0',您将看到会发生什么。还有一件事,你需要删除'top:150px;'。下次你必须放一些工作代码。在您添加的示例中,至少您将高度值添加到主 div 中,您看不到任何东西。
推荐阅读
- django - Django DB 压缩(字符串数据)
- php - curl 7.79.0 中的 BUG 如何在 Centos 7 + WHM/cPanel 上升级到 7.79.1 作为 PHP 扩展?
- python - 托斯卡谜题 73589 用 RBFW 解决。(失败:SyntaxError:扫描字符串文字时 EOL(
) - ios - 如何将徽章添加到 *GMSMarker()* 图像中?
- permissions - DevOps - 无法在我的权限项目中添加注册用户
- python - 使用 Python dict 设置 Networkx 节点的颜色
- python - 如何从 csv 文件创建数据框,其中数据存储在单个列中?
- typescript - 为什么实例属性的装饰器在静态属性的装饰器之前执行?
- c# - 如何使用 vb.net 或 c#.net 获取上一年
- javascript - 如何在组织结构图highcharts中添加水平滚动?