2

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

我试图让背景图像水平拉伸以适合特定的 div。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 属性完全符合我的要求，但当然不适用于 IE 9 之前的版本。我很想知道是否能找到适用于 IE 8 和 7 的解决方案。

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

4

2 回答 2

4

我发现的另一个解决方案适用于我的目标浏览器（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 的解决方案在浏览器覆盖率方面可能更全面，并且包含一个出色的工作演示。

于 2012-10-22T15:08:47.420 回答
2

只要有强大的意志，必有一条路为你开。您应该采用渐进式增强技术来获得最佳体验。下面是你应该如何构建它（JS Fiddle 下面）：

  1. 首先，在您的内容下有一个绝对定位<img>，可以将宽度和高度设置为 100%，以便它延伸。
  2. 接下来，对于支持Background Size的浏览器，隐藏上述<img>标签并.parent使用 arepeat-y和 a设置背景background-size:100% auto;
  3. 最后，对于支持CSS Gradients的浏览器，将它们用于background-image您的.parent

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

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

如果您不了解Modernizr，我不能再为这样的项目推荐它。它是一个使用 javascript 测试现代浏览器功能并将类名添加到<html>标签的库，以便您可以逐步增强您的网页。

于 2012-09-19T15:15:42.123 回答