background-size：包含在Firefox中截断图像边缘

Question

让我们说这是我的HTML。

<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中遇到这个问题。这里的任何人都可以帮助我。

编辑：FIDDLE demo for the problem

Answer 1

这在我最近的一次遭遇中对我有用。这样可以防止图像被切断：

transform: rotate(0.0001deg);

Answer 2

尝试将背景大小设置为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>

如果这个答案有帮助。别忘了标记为apport或标记为答案

由于 AB

Answer 3

我认为这是subpixel problem。这就是图像在某些缩放模式下正常工作的原因。

我编辑了你的jsFiddle，将background-size设置为99.9％，然后正常工作。您可以看到示例here。

注意：我把!important覆盖了内联样式......感觉很懒，你知道;）

Answer 4

如果您希望背景图像覆盖整个页面..将图像应用于背景并提供背景大小：覆盖它... 你可以试试这个：

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/