IE11製作背景圖片文字模糊

我的工作網站，在那裏我用圖像精靈上的一個按鈕上。在我試過的其他瀏覽器中，除了IE11以外，我的精靈上的文本應該是清脆的，但在IE11中，文本變得模糊（請參閱圖像）。IE11製作背景圖片文字模糊

IE11 Other browser

的模糊一個是IE11 OFC。精靈的寬度是189px，高度是378px。我使用下面的CSS：

button { 
    width:189px; 
    height:189px; 
    background-image:url('../images/kontakt-os.png'); 
    background-position: top; 
    cursor:pointer; 
    border-radius: 100px; 
} 

button:hover { 
    background-position: bottom; 
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0); 
}

所以，這只是一個IE漏洞，或者我真的可以做些什麼嗎？

在此先感謝。

編輯：我可能只是添加，如果我只是插入相同的圖像<img src="lala.png">文本不模糊。它僅適用於背景：/

來源

2013-12-21 Denver Dang

最喜歡的部分：「這只是一個IE漏洞... – Phlume

這是由於半徑如果按鈕沒有半徑，模糊不會發生不知道爲什麼 – Christina

我也有類似的？。問題，我的問題（和答案）在這裏：http://stackoverflow.com/questions/20093634/blurry-background-images-after-update-to-ie11 – wf4

這是一個正常的IE漏洞。

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

我還沒有找到這個問題的任何解決方案呢。

來源

2013-12-21 21:34:13 Softwarehuset

我建議不具有該按鈕，一個精靈在所有以下reasons-

這是無法訪問或SEO高效 - 既不屏幕閱讀器，也沒有搜索引擎爬蟲可以讀取圖像中的文本。
它需要一個額外的HTTP請求，下載精靈形象，這會讓你的網站加載速度比較慢 - 特別是在移動設備上
除非你使按鈕多比它需要在頁面上呈現較大，那麼在擴展高密度設備（如新型全尺寸iPad和高級Android平板電腦，近期Mac和高級Windows筆記本電腦）時，您將遇到模糊問題。明顯地使圖像比所需要的更大意味着它更大並且加劇了從第二點開始的速度損失。
如果你想在未來的任何一點改變顏色方案，你只需要改變你的CSS顏色屬性，而不是重新生成新的圖像。
這是瑣碎使得該按鈕看起來像在CSS的屏幕截圖。

如果你使用的標記像這個 -

<button class="text-button" type="button">Send Besked</button>

和CSS像這個 -

.text-button { 
    background: #b32e01; 
    border: none; 
    border-radius: 8px 8px 8px 0; 
    color: #ffffff; 
    cursor: pointer; 
    height: 3em; 
    outline: none; 
    padding: 1em 0; 
    text-transform: uppercase; 
    width: 12.5em; 
} 

.text-button:hover { 
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0); 
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0); 
}

它結束了看起來像這樣（見JSFiddle for source） -

Button mockup

雖然只是一個粗略的模型（你可能想要改變比例，添加一個漸變或改變懸停的背景 - 我看不到原始精靈知道你在懸停狀態精靈中做出的轉換），它看起來很像原創，並具備以上所有優點 - 特別是它應該解決您最初發布的文字問題。

來源

2014-01-01 15:52:07 pwdst

我發現通過使用not（：hover）成功消除了模糊效果。這似乎迫使背景圖像不模糊。

嘗試增加

button:not(:hover) { 
    width:189px; 
    height:189px; 
    background-image:url('../images/kontakt-os.png'); 
    background-position: top; 
    cursor:pointer; 
    border-radius: 100px; 
}

來源

2014-03-25 19:41:17 Andy

我剛剛遇到這個問題。

我只是將背景圖像放在一個範圍內，以保持不同元素上的邊框半徑和背景圖像，似乎已經完成了這個技巧。

.item { 
    border-radius: 8px 8px 8px 0; 
} 

.item span { 
    background-image:url('imagepath.png'); 
}

來源

2014-12-14 11:34:52 sarah3585

IE11製作背景圖片文字模糊

回答

相關問題