Question

我正在构建一个网站，其标题中的全宽背景图片会随页面调整大小。在Firefox中调整大小时，图像下方会出现一个不寻常的闪烁水平线。该线条不会显示为全部，但在更改尺寸时会闪烁。该行显示在背景图像的底部，而不是标题元素的底部。

只有当我在OSX 10.8.4，Firefox 23.0中进行测试时才出现在Firefox的MacOS版本中。 Windows 8，Firefox 23.0.1或我测试的其他浏览器中没有出现此问题。

以下是我标题上的代码：

<header>
    <h1><span>Sound Soups on Madison - Healthy &amp; Convenient Alternatives for Your Busy Work Week</span><a href="index.php"><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></a></h1>
    <nav id="nav-main">
        <?php echo makeLinks($nav1); ?>
    </nav>
</header>


header{
    padding:0 2.12765957% 35px;
    overflow:hidden;
    background-image:url('../images/bg-header.jpg');
    background-repeat:no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

我尝试使用封面而不是100％作为背景大小，并在标题下放置填充或边框。谷歌搜索问题没有发现任何事情。如果有人知道答案，请提前致谢。

Answer 1

编辑：

这个问题似乎与FireFox如何缩放背景图像有关。以下似乎使用FireFox 23.0.1，OSX 10.8.4

为我解决了这个问题

在style.css中，尝试将标题规则中的background-size属性从100％auto更改为99.99％auto，即

header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto; 
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}

~~如果我正确理解您的问题，请检查样式表的顶部@ http://soundsoups.julie-edwards.com/css/responsive.css~~

你有

header{ background-image:url('../images/none.png'); padding-bottom:15px; border-bottom:2px solid #7a918c; margin-bottom:20px; }

~~我认为边界底部是问题的原因。~~

祝你好运！

Answer 2

对于body元素上的背景大小的图像存在同样的问题。我通过将背景大小的图像应用于定位的div元素来修复它。

如果可以提供任何帮助。

Answer 3

我通过将.jpg背景图片转换为.png解决了这个问题。如果其他人遇到此问题并且无法更改background-size，请尝试此操作。

在火星上的背景图像下闪烁的行调整大小

3 个答案: