悬停时旋转Y时CSS背景图像覆盖div

Question

我有一张在悬停时具有翻转效果的卡片。卡片有背景图片，每一面都有颜色到透明渐变。

当卡片翻转时，背景图像的位置在顶部，在渐变和 div 内容之上。没有背景图片效果很好。

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

这是一个codepen，代码为https://codepen.io/ramonsan/pen/QJpgrv

.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>