我有一個(gè)奇怪的問題。這僅發(fā)生在初次翻牌時(shí)。我的文本顯示在漸變背景之上。該背景圖像在鼠標(biāo)懸停時(shí)顯示。文本需要一瞬間才能顯示，然后就會(huì)彈出。當(dāng)圖像翻轉(zhuǎn)時(shí)，我需要文本已經(jīng)存在，或者至少有一個(gè)平滑的過渡（如果這是不可能的）。我已經(jīng)追蹤到文本在圖像不同角落的位置。如果我刪除用于放置文本的 CSS，那么它會(huì)顯示并正常工作。這是 HTML<div class="flip-card">  <div class="flip-card-inner">    <div class="flip-card-front">      <img  [src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)"  alt="Avatar" style="width:300px;height:300px;">    </div>    <div class="flip-card-back linear-gradient">      <h1 class="info">{{getTitle()}}</h1>      <p class="info-bottom-right">{{getTitle()}}</p>      <p class="info-bottom-left">{{getTitle()}}</p>    </div>  </div></div>這是CSS.flip-card {  background-color: transparent;  width: 300px;  height: 200px;  border: 1px solid #f1f1f1;  perspective: 1000px; /* Remove this if you don't want the 3D effect */}/* This container is needed to position the front and back side */.flip-card-inner {  position: relative;  width: 100%;  height: 100%;  text-align: center;  transition: transform 0.8s;  transform-style: preserve-3d;}/* Do an horizontal flip when you move the mouse over the flip box container */.flip-card:hover .flip-card-inner {  transform: rotateY(180deg);  cursor: pointer;}/* Position the front and back side */.flip-card-front, .flip-card-back {  position: absolute;  width: 100%;  height: 100%;  -webkit-backface-visibility: hidden; /* Safari */  backface-visibility: hidden;}/* Style the front side (fallback if image is missing) */.flip-card-front {  background-color: #bbb;  color: black;}/* Style the back side */.flip-card-back {  background-color: dodgerblue;  color: white;  transform: rotateY(180deg);}.info{  display: block;  position: absolute;  top: 10px;  left: 10px;  color: #fff;  font-weight: bold;}.info-bottom-right{  display: block;  position: absolute;  top: 10px;  right: 10px;  color: #fff;  font-weight: bold;}.info-bottom-left{  display: block;  position: absolute;  bottom: 10px;  left: 10px;  color: #fff;  font-weight: bold;}