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中切断图像边缘

回答

相关问题