时间戳

首页 > 解决方案 > 为什么我的图像叠加在 iPhone 和 iPad 上不起作用？

html - 为什么我的图像叠加在 iPhone 和 iPad 上不起作用？

问题描述

图像悬停覆盖在我测试过的所有其他平台（台式机、安卓等）上都有效，但它似乎不适用于 iPhone。谁能指出我正确的方向，好吗？我不确定这是否与z-index或是否可能需要有关web-kits？

当您将鼠标悬停或单击时，.service它应该显示覆盖文本。请看下面的代码：

.service {
  position: relative;
  width: 80%;
  height: 200px;
  margin: 60px 10%;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  transition: all 0.3s;
}

.main-img-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  font-weight: 700;
  color: #f8f9fa;
  opacity: 1;
  transition: 0.5s;
}

.img-title {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2px 10px;
  font-size: 1.1em;
}

.img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 1%;
  background: rgba(0, 0, 0, 0.7);
  color: #f8f9fa;
  display: flex;
  flex-direction: wrap;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  opacity: 0;
}

.service:hover .main-img-title .img-title {
  animation-name: title-slide-up;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0);
}

.service:hover .img-overlay {
  opacity: 1;
}

#service-event:hover .main-img-title .img-title {
  animation-name: title-slide-up-low;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.overlay-img-description {
  font-size: 18px;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 1%;
  width: 100%;
  max-height: 200px;
}

.overlay-img-description ul {
  padding: 0;
}

.overlay-img-description li {
  display: inline-block;
  font-size: 20px;
}

.overlay-img-description li+li::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: 0 13px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: currentColor;
}

.overlay-img-description p {
  margin: 10px 0 0 0;
  font-size: 0.9em;
}

@keyframes title-slide-up-low {
  from {
    transform: translateY(0)
  }
  to {
    transform: translateY(-45px)
  }
}
<div id="service-event" class="service">
  <img class="bg-img" src="Images/Steel .JPG" alt="Steel" id="steel">
  <div class="main-img-title">
    <div class="img-title" id="steel-title">STEEL</div>
  </div>
  <div class="img-overlay">
    <p class="overlay-img-description" id="steel-desc">Our steel crews are experienced with the construction of system scaffolding, black steel tower and truss structures. We specialise in supplying steel climbing teams with the support of steelhand ground labourers as well as plant operators who are
      familiar with the requirements of truss and steel assembly.</p>
  </div>
</div>

标签： htmlcssiosoverlay

解决方案

为 img-title 和 img-overlay 添加 z-index，为 img-overlay 定义更高的值，这将解决您的问题。

推荐阅读