1

假设这是我的 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; 
}

在 no-zoom 或 normal 模式下，图像在 Firefox 上似乎已经被截断（见附图），但是当我缩放我的页面时，图像似乎变得更好（见附图）。我只在 Firefox 中遇到这个问题。这里的任何人都可以帮助我。没有缩放 带变焦

编辑：问题的 FIDDLE 演示

4

4 回答 4

5

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

transform: rotate(0.0001deg);
于 2014-06-19T08:54:09.797 回答
2

尝试将背景大小设置为 59px，我在那个小提琴中做了这个并按预期工作。IE

 <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

于 2013-06-27T11:01:56.130 回答
1

我认为这是一个亚像素问题。这就是图像在某些缩放模式下工作正常的原因。

我编辑了您的 jsFiddle 以将其设置background-size为 99.9%，然后正常工作。您可以在此处查看示例。

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

于 2013-06-27T11:06:00.450 回答
0

如果您希望背景图像覆盖整个页面..将图像应用到背景并给出背景大小：覆盖它..您可以尝试以下操作：

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-27T10:56:32.933 回答