Question

我在z轴上分发了一些图像，然后将鼠标用作（假）3D相机，以便在移动鼠标光标时透视发生变化，并且它在Chrome中完美运行，但按钮显示在所有图像后面Safari浏览器让你无法看到它。我尝试使用z-index但它没有用。

<div class="cd-background-wrapper">
    <figure class="cd-floating-background">
        <img src="img/cd-img-1.jpg" alt="image-1">
        <img src="img/cd-img-2.png" alt="image-2">
        <img src="img/cd-img-3.png" alt="image-3">
    </figure>
<a class="follow fade-in three" id="fade-btn" href="#"><img 
class="follow-btn" src="/static/assets/images/Follow.gif"/></a>
</div>

这是我的css：

.cd-floating-background {
  position: absolute;
  right: 0;
 }
.cd-background-wrapper {
  width: 100%;
  height: 100vh;
 overflow: hidden;
 background-size: cover;
 position: relative;
} 
.cd-floating-background {
transform-style: preserve-3d;
}

 .cd-floating-background img:first-child {
transform: translateZ(50px);
}

.cd-floating-background img:nth-child(2) {
transform: translateZ(290px);
 }

.cd-floating-background img:nth-child(3) {
  transform: translateZ(400px);
 }

.follow::before,
 .follow::after {
 position: absolute;
 content: "";
 transition: all 0.5s;
}
 .follow {
 position: absolute;
 top: 93%;
 left: 51%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 }

Answer 1

使用z-index更改z轴位置。将其设置为大于1的任何数字（默认值为1）并设置位置属性。

.follow  {
        z-index: 2;
        position: relative;
 }

z index属性可以帮助你。

HTML按钮出现在Safari中的图像后面

1 个答案: