悬停rotateY时的CSS背景图像覆盖div

Question

我有一张具有翻转效果的卡。卡片具有背景图像，并且每侧都有从颜色到透明渐变的颜色。

当卡片翻转时，背景图片位置位于顶部，超过渐变和div内容。没有背景图片效果会很好。

如何解决此问题并将图像置于内容和渐变之下？

这是一个带有代码https://codepen.io/ramonsan/pen/QJpgrv的codepen

.flip-card {
  perspective: 1000px;
  height: 400px;
  width: 300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding: 1em;
  padding-top: 5rem;
}

.flip-card-front {
  background: -moz-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6499d2', endColorstr='#007db9e8', GradientType=0);
  /* IE6-9 */
  color: white;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  /* IE6-9 */
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

<div class="flip-card col-6 col-md-4 pb-4 mb-0">
  <div class="flip-card-inner" style="background-image: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
    <div class="flip-card-front">
      <h1>FRONT</h1>
    </div>
    <div class="flip-card-back">
      <h2>Back</h2>
    </div>
  </div>
</div>

Answer 1

考虑在内部div中使用背景图片。我使用CSS变量来简化处理并避免在CSS中定义图片，因此您可以通过内联样式不断对其进行调整。

.flip-card {
  perspective: 1000px;
  height: 400px;
  width: 300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  padding: 1em;
  padding-top: 5rem;
}

.flip-card-front {
  background: 
   linear-gradient(to bottom, rgba(100, 153, 210, 1) 28%, rgba(109, 165, 218, 1) 55%, rgba(125, 185, 232, 0) 100%), 
   var(--i);

  color: white;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: 
   linear-gradient(to bottom, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%), 
   var(--i);

}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

<div class="flip-card col-6 col-md-4 pb-4 mb-0">
  <div class="flip-card-inner" style="--i: url(https://images.wallpaperscraft.com/image/glare_circles_spots_background_dots_bright_61905_240x400.jpg);">
    <div class="flip-card-front">
      <h1>FRONT</h1>
    </div>
    <div class="flip-card-back">
      <h2>Back</h2>
    </div>
  </div>
</div>