Question

我有一个带有背景图片的HTML页面。

body {
  background-color: #FFFFFF;
  background-image: url(bg_width900px_height675px.jpg);
  background-attachment: fixed;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

当背景图像是一个美丽的风景时，这很好用。左侧较暗，右侧较轻。

我也有一个比我的屏幕宽的div。我想使用与HTML页面使用相同的背景图像。实际上，应该使用background-attachment: fixed;，并且背景图片应该与我的HTML页面的背景看起来100％相同。换句话说，大小必须相同。

请注意，我不是在寻找调试帮助。我只是不知道我的愿景是否有可能实现和创造。

更新

感谢blizzyb，在我看来这是可能的。到目前为止，这是我最好的代码：

＆＃13;

<div style="width: 200%; background-image: inherit; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed;"></div>

＆＃13;

Answer 1

我相信你可以在你需要的任何属性上添加inherit值。

Answer 2

您可以定义一个分配给div标签的类。

.mydiv{
    background-image: url(bg_width900px_height675px.jpg);
}

如果你有自举，你也可以添加类.img-responsive，这将避免图像失真。你的div标签看起来应该是这样的

<div class="img-responsive mydiv">...</div>

CSS - 使div的背景图像看起来与HTML页面的背景图像相同

2 个答案: