CSS background-image cover div при вращении при наведении

Question

У меня есть карта с эффектом переворота при наведении. Карточка имеет фоновое изображение, а каждая сторона имеет градиент цвета к прозрачному.

Когда карта переворачивается, позиция фонового изображения находится сверху, поверх градиента и содержимого div. Без фонового изображения эффект в порядке.

Как я могу решить эту проблему и поместить изображение под контент и градиент?

Вот кодовая ручка с кодом 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

Подумайте об использовании фонового изображения внутри внутренних элементов.Я использовал переменную 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>