background-size：包含在Firefox中切斷圖像邊緣

假設這是我的HTML。background-size：包含在Firefox中切斷圖像邊緣

<div id="spirit_tutorial_reward"> 
    <div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"></div> 
    <div id="spirit_tutorial_reward_header">45 Spirit</div> 
    <div id="spirit_tutorial_reward_text">Use Spirit to recruit new Rusherz in the Locker Room!</div> 
</div>

，這是我的風格：

#spirit_tutorial_reward 
{ 
    position:absolute; 
    top:77px; 
    left:371px; 
    width:45%; 
} 
#spirit_tutorial_reward_icon 
{ 
    background:url(../images/gift_icon_spirit.png) top no-repeat; 
    width:60px; 
    height:60px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    float:left; 
} 
#spirit_tutorial_reward_header 
{ 
    font-size: 15px; 
    font-family:"NFLEndzoneSansBold"; 
    color: #000; 
    position:absolute; 
    left:69px; 
    top:0px; 
    float:left; 
} 

#spirit_tutorial_reward_text 
{ 
    font-size: 15px; 
    font-family:"NFLEndzoneSansBold"; 
    color: #000; 
    position:absolute; 
    left:69px; 
    top:22px; 
    float:left; 
}

在無縮放或正常模式下，圖像看起來都剁掉在Firefox（見附件圖片），但是當我放大我的頁面時，圖像似乎變得更好了（見附圖）。我只在Firefox中遇到這個問題。任何人都可以幫助我。 without zoom with zoom

編輯：FIDDLE demo for the problem

來源

2013-06-27 Harsha Venkatram

看起來像你想'背景大小：cover'，不'contain' ... – CBroe

@CBroe：那不是做任何區別。圖像仍然被切碎。 –

當時的例子。 – CBroe

我認爲這是一個subpixel problem。這就是圖像在某些縮放模式下工作正常的原因。

我編輯了你的jsFiddle，將background-size設置爲99.9％，然後正常工作。您可以看到示例here。

注：我把!important覆蓋內聯樣式...懶洋洋的感覺，你知道;）

來源

2013-06-27 11:06:00 Arkana

感謝您的子像素問題的鏈接。接受這個答案是因爲使用'％'值來代替實際像素更容易。談懶惰：這是所有壞習慣的母親，但最終它是我們的母親，我們應該尊重她;） –

如果您希望背景圖像覆蓋整個頁面..圖像應用到背景，讓背景大小：覆蓋到它.. 你可以試試這個：

body { 
background-image: url(your-image.jpg); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-color: #EEE; 
background-size: cover; 
}

您可以參考這個http://www.css3.info/preview/background-size/

來源

2013-06-27 10:56:32

感謝您的時間，但這不是我想要的。當我給它一個「背景大小」時，我的圖像在Firefox上被切碎了。 –

嘗試設置背景大小59px我做到了在小提琴和預期工作。即

<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size:59px;"></div>

如果這個答案是helpful.Dont忘記，以紀念與apport或標記爲答案

感謝 AB

來源

2013-06-27 11:01:56

謝謝，解決了這個問題。但是你知道爲什麼當我給出一個'background-size：contain'時圖像會中斷嗎？ –

這在我最近遇到的一個爲我工作。這被切斷防止圖像：

transform: rotate(0.0001deg);

來源

2014-06-19 08:54:09

謝謝，這工作在我的情況。 – Ganesh

經過一個愚蠢的bug後，一個元素的背景被削減後，我找到了你的解決方案，它適用於IE9（'-ms-transform'），IE10和IE11！非常感謝！ – Marian

background-size：包含在Firefox中切斷圖像邊緣

回答

相關問題