DIV背景图片溢出

Question

我有一个带有背景图片的 DIV 元素，我希望它能在超出 DIV 的尺寸时溢出（现在由于图像比 DIV 大而裁剪了图像）。

这是否可能？`overflow: visible` 不起作用！

- Jeroen

---

背景图像不是div内容的一部分，这就是重点 :) 这就是为什么溢出不会帮助你的原因。 - Elad Lachmi

抱歉，您误解了，因为Elad Lachmi说背景图像不是div的一部分，而且我没有正确理解您的问题，请给我们提供一个链接或将其添加到jsFiddle中，以便我们可以亲眼看到问题。 - Jack Billy

Answer 1

您可以采用另一种方式实现：

#box {
    margin:-50px 0 0;
    padding:50px 0 0 0;
    background:url(/images/image.png) no-repeat;
}

- vaxxis

Answer 2

将背景放在一个包含你的 <div> 的更大的 <div> 上。

- SLaks

Answer 3

使用CSS3非常容易实现。我在尝试这个过程中偶然发现了这篇文章，发现我也能够做到。

以下是我使用的代码：

#page
{
  width:1024px;
  height:662px;
  padding:0 58px 105px 58px;
  background-image:url(../images/milk_splash.png), url(../images/content_back.png);
  background-size: 1082px 767px, 1024px 662px;
  background-origin:padding-box, content-box;
  background-repeat:no-repeat, no-repeat;
  background-position:top left, top left;
}

您的图像将按照您放置它们的顺序进行分层。您的填充是与您的 div 大小的偏移差。

我发现了这个并且必须分享一下。在 IE <9 中无法使用。

- Chris Coppenbarger