3

我正在构建一个网站，该网站在标题中具有全宽背景图像，可随页面调整大小。在 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% 作为背景大小，并在标题下放置填充或边框。谷歌搜索问题没有出现任何问题。如果有人知道这里的答案，请提前感谢。

4

3 回答 3

7

编辑：

该问题似乎与 FireFox 如何缩放背景图像有关。以下似乎为我修复了 FireFox 23.0.1 ， OSX 10.8.4

在 style.css 中，尝试将 header 规则中的 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;     
}

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

祝你好运！

于 2013-08-25T00:15:17.433 回答
0

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

如果这有任何帮助。

于 2014-08-11T12:01:16.980 回答
-1

我通过将我的 .jpg 背景图像转换为 .png 解决了这个问题。万一其他人遇到这种情况并且无法改变background-size，试试这个。

于 2014-04-15T00:49:53.487 回答