爲什麼文本在動畫中使用而不是靜態

Question

我正在使用jssor滑塊在我的頁面上顯示滑塊。當他的文字在一個外部動畫div裏時，顯示很清晰而且沒有像素化。

HTML：

<div u="slides" class="sliderHolder"> 
    <div> 
     <img u="image" src="theImages/slider/homepage/1.png" alt="1" title="1" /> 
     <div u="caption" t="CLIP|L" class="sliderCapMain"> 
      <div class="sliderCapBG"></div> 
      <div class="sliderCapText"> 
       <h1 class="sliderCapTextHdr">Healthy Cooking</h1> 
       <br /> 
       <span class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</span> 
      </div> 
     </div> 
    </div> 
</div> 

輸出：

但是，當我在做它自己的動畫格文，這是非常像素化和不清晰。

HTML：

<div u="slides" class="sliderHolder"> 
    <div> 
     <img u="image" src="theImages/slider/homepage/1.png" alt="1" title="1" /> 
     <div u="caption" t="CLIP|L" class="sliderCapMain"> 
      <div class="sliderCapBG"></div> 
     </div> 
     <div u="caption" class="sliderCapMain" t="ZMF|10"> 
      <div class="sliderCapText"> 
       <div class="sliderCapTextHdr">Healthy Cooking</div> 
      </div> 
     </div> 
     <div u="caption" class="sliderCapMain" t="RTTL|BR"> 
      <div class="sliderCapTextF"> 
       <div class="sliderCapTextFtr">Discover simple solutions to cook delicious and healthy meals for you and your family. Cooking tips, how-to guides and more!</div> 
      </div> 
     </div> 
    </div> 
</div> 

輸出：

正如你所看到的第二圖像文字都有點像素化。

CSS：

.sliderHolderMain 
{ 
    position: relative; 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    top: 0px; 
    left: 0px; 
    width: 1100px; 
    height: 347px; 
    overflow: hidden; 
} 
.sliderHolder 
{ 
    cursor: move; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 1100px; 
    height: 337px; 
    overflow: hidden; 
} 
.sliderCapMain 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 225px; 
    height: 337px; 
    text-align: center; 
} 
.sliderCapBG 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: rgba(255, 255, 255, 0.85); 
    filter: alpha(opacity=85); 
} 
.sliderCapText 
{ 
    position: absolute; 
    top: 5%; 
    left: 5%; 
    right: 5%; 
    color: #000; 
    text-align: left; 
} 
.sliderCapTextF 
{ 
    position: absolute; 
    top: 15%; 
    left: 5%; 
    right: 5%; 
    color: #000; 
    text-align: left; 
} 
.sliderCapTextHdr 
{ 
    color: #0074C9; 
    font-size: larger; 
    font-weight: bold; 
    padding: 0; 
    margin: 0; 
} 
.sliderCapTextFtr 
{ 
    color: #000; 
    font-size: small; 
} 

請幫我解決這個問題。

Answer 1

這是因爲當通過CSS進行動畫時，元素被推到自己的繪圖層上。該圖層使動畫更加流暢，但無法處理Chrome中的清晰文字。

不幸的是，我不知道通過CSS解決這個問題。

Answer 2

要開個玩笑並且可能解決你的問題：太多的DIV會破壞文本。我相信發生的事情是，第一個例子中，SPAN標籤包含在先前的DIV中，但在第二個例子中，帶有文本的DIV被前面的DIV覆蓋，從而使文本看起來模糊。

這裏的經驗法則是：對於給定的區域，您只需要一個DIV。就像使用TABLE命令做所有事情時一樣 - 您試圖將所有內容都分解爲組件，然後將所有這些組件放入單獨的DIV中。你不需要那樣做。對於給定的區域，你應該只有一個DIV，然後使用其餘的HTML命令來實現你想要的。

沒有規則，在跨度中使用ID和名稱不是犯罪。就像DIV一樣 - 您可以更改SPAN標籤的內容，就像您可以更改A，P或任何其他標籤的內容一樣。只要給他們唯一的ID，然後你可以修改他們，如果你想改變他們。