主題中的未知 CSS 代碼導致圖像模糊

Question

我擁有的 wordpress 主題，NeoBeat 導致我頂部的徽標變得模糊。

我的網站是 earthcry.net

上圖的 CSS 是

opacity: 1;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Answer 1

它實際上是由這里的 css 引起的，它正在減小尺寸並導致模糊：

#qodef-page-header .qodef-header-logo-link img {
    display: block;
    margin: auto 0;
    width: auto; // Comment this out or delete
    max-height: 100%; // Comment this out or delete
    -webkit-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

如果你擺脫那些，它會顯示在它的預期大小。

Answer 2

這實際上是使用（相對較舊的帽子）絕對位置垂直居中方法的一個相對常見的問題。 在此處快速搜索 The Goog、The duck 站點等，將顯示“blurry <element> with transforms”的許多結果。

最簡單和最務實的處理方法是不使用“absolute/50%/transform -50%”方法使元素居中，並升級到使用flex 、 align-items: center和justify-content: center 。 有各種各樣的 hacky 方法來修復模糊，但你需要循環使用它們並找到適合你的方法（基本上，它在 69px 高的元素中完美居中，所以它在中心的每一側都有半個像素以處理它不能放置的東西，所以它給它起了別名。）

然而，綜上所述，看起來您實際上根本不需要居中機制。

您需要做的就是刪除實際的 position 覆蓋和轉換。 這是您的徽標（在移動設備上似乎是正確的）。

如果您只是使用：

opacity: 1;
position: absolute;

它看起來很好：

只需刪除top, left和供應商前綴的transform: translateY ，您應該可以得到 go。

（答案里的預覽可能比較模糊，點開還是可以的，我promise 后一張很清晰，哈哈）