0

我在背景图像比例和响应式设计方面遇到问题。

我有一个简单的标题图像背景和一个内容图像背景。标题图像应该无缝地合并到内容中。两个图像都具有精细的纹理，因此它们需要始终保持相同的比例。

标题背景在<img>标签中，而内容是 a background-image，因为它需要对未知数量的内容使用 repeat-y 功能......

但是您可以看到缩放的内联图像和背景之间的颗粒差异：

标题/内容划分

我知道这个background-size属性，但这不是向后兼容的，我不确定它是否能响应。

我的 CSS：

#header{

    max-width:700px;
    width:100%;
    margin:0 auto;

}

#header img{

    max-width:700px;
    width:100%;

}

#content{

    max-width:700px;
    width:100%;
    height:600px;    // <-- for testing with no content
    margin:0 auto;

    background-image:url('../imgs/bg-main.jpg');
    background-repeat:repeat-y;

}

相关的 HTML：

<section id="header">
    <img src="lib/imgs/bg-top.jpg"/>
</section>
<section id="content">
    <!-- content goes here !-->
</section>

任何有关修复或某些选项的帮助都会很棒。

4

1 回答 1

1

你会考虑把标题图片做成透明的png吗？省略标题图像中的浅棕色纹理，并将其设置为包装#header 和#content 的元素上的背景图像。

否则，background-size会为所欲为。IE8 上的访问者不会看到您想要的正确效果，但这并不是当今世界上最糟糕的事情。

见：http ://caniuse.com/background-img-opts

于 2013-09-14T01:00:32.117 回答