元素轉換爲半像素，文本現在變得模糊

所以我有一個Bootstrap旋轉木馬，帶有一個標題，我試圖垂直居中。元素轉換爲半像素，文本現在變得模糊

HTML：

<div class="item image1 active"> 
    <div class="carousel-caption"> 
     <h1 class="color-primary-0">Create Memories</h1><br> 
     <p class="color-primary-2">This is where a bunch of cool lorem ipsum goes</p><br> 
     <a href="#"><button class="button1 bg-primary-2"><span>Watch Video</span></button></a> 
    </div> 
</div>

CSS：

div.carousel-caption{ 
top: 50%; 
transform: translateY(-50%); 
bottom: initial; 
}

，直到你在看文字也能正常工作和偉大。該元素似乎落在半像素上，因此導致文本模糊。所以我對一些解決方案做了一些研究，這些都是我嘗試過的：

transform-style：preserve-3d; （在父元素/ div.item上）
transform：perspective（1px）translateY（-50％）translate3d（0,0,0）;
transform：translateZ（0）;
-webkit-font-smoothing：antialiased;
backface-visibility：hidden;

遺憾的是沒有上述的工作。所以我仍然在尋找解決這個問題的方法。無論是否使用普通的CSS。也許是一種垂直居中自舉標題的Javascript形式。下面有一些圖片供參考：

文本是模糊的，當垂直居中：

文本時不居中

來源

2017-04-23 Benjamen Kuhman

不幸的是與'transform'，有沒有辦法避免的子像素精度使用百分比時。如果您可以將標題的高度設置爲偶數量的像素，則可能會起作用。否則，您將不得不使用不同的方法來集中您的內容。 [flexbox]（http://caniuse.com/#feat=flexbox）在這方面很棒。 – Vestride

您是否嘗試過僅使用'transform：perspective（1px）translateY（-50％）'？ ...另外，對於webkit瀏覽器，重置模糊可以創造奇蹟'-webkit-filter：blur（0px）' – LGSon

後好一些更多的挖掘，是不是模糊的，我決定使用flexbox將是實現這種垂直居中而不模糊文本的最簡單方法（如Vestride所建議的）。好在它似乎並不時原樣適用與引導旋轉木馬造成任何併發症：

div.carousel-caption{ 
    position: static; 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    justify-content: center; 
    align-items: center; 
}

這似乎像它應該根據this大多數瀏覽器。 IE可能會受到一些影響。但是它好工作爲我的IE 11

來源

2017-04-23 17:07:45

元素轉換爲半像素，文本現在變得模糊

回答

相關問題