Question

我知道有人问过类似的问题但是我没有设法从这些问题中得到任何建议并得到一些有效的方法。关于这个主题的很多建议也是为了制作整页背景图像，这不是我想要做的。

我正在尝试将背景图像水平拉伸以适合特定的div。 div本身包含子内容，内容应显示在背景的顶部。

我有以下html：

<div class="parent">

    <div class="child">

        <h3>My Header</h3>

        <p><a href="another.html">A link</a></p>

        <p>Some content</p>

    </div>
</div>

和css是这样的：

.parent{
  width: 100%;
  height: 145px;
  float: left;
  clear: both;
  background: url(../img/parent-bg.png) top left no-repeat;
}

.child{
  width: 960px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

parent-bg.png从左到右有一个渐变填充，并且是60 x 142像素，这就是为什么我希望它伸展以适应父div而不是仅使用repeat-x（重复时渐变看起来很奇怪）

CSS3 background-size：cover属性完全符合我的要求，但当然不适用于早于9的版本的IE.I很想知道我是否能找到适用于IE 8和7的解决方案

我看了一下这个jquery插件的快速播放，但无法让它工作：https://github.com/louisremi/jquery.backgroundSize.js#readme。我不太热衷于在javascript中隐藏样式属性，这只是一个“快速播放”。

Answer 1

我找到的另一个解决方案适用于我所针对的浏览器（IE 7 +，最后几个版本的firefox和chrome）等等，涉及使用浏览器前缀如下：

.parent{
    width: 100%;
    height: 145px;
    float: left;
    clear: both;
    background: url(../img/parent-bg.png) top left no-repeat;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}

.footer_inner{
  width: 960px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

@ rgthree的解决方案在浏览器覆盖方面可能更全面，并且涉及一个出色的工作演示。

Answer 2

哪里有遗嘱，就有办法。您应该使用渐进增强技术来获得最佳体验。以下是你应该如何构建这个（JS Fiddle Below）：

首先，在您的内容下放置一个绝对定位的<img>，其宽度和宽度可以为高度设定为100％，因此它会延伸。
接下来，对于支持背景大小的浏览器，隐藏上述<img>标记，并使用.parent和{{1}设置repeat-y上的背景}
最后，对于支持 CSS Gradients 的浏览器，请将其用于background-size:100% auto;的{{1}}

这是一个JSFiddle：http://jsfiddle.net/rgthree/k5gk7/

上面的JS小提琴适用于所有相关的浏览器（渐变图像是从谷歌图像中随机拍摄的，与CSS渐变颜色不同，但是你得到了图片）。它使用Modernizr进行功能测试。

如果您不了解Modernizr，我不能为此类项目推荐更多内容。它是一个使用javascript来测试现代浏览器功能的库，并为background-image标记添加了类名，因此您可以逐步增强您的网页。

水平拉伸div背景图像

2 个答案: