DIV 背景图像溢出答案

【问题标题】：DIV background-image overflowDIV 背景图像溢出
【发布时间】：2011-07-28 15:48:47
【问题描述】：

我有一个带有背景图像的 DIV 元素，我希望它溢出到 DIV 的尺寸之外（现在它会切断图像，因为图像比 DIV 大）。

这可能吗？ overflow:visible 不行！

【问题讨论】：

背景图片不是 div 内容的一部分，这就是重点 :) 这就是为什么溢出对你没有帮助。
抱歉，您弄错了，因为 Elad Lachmi 很遗憾背景图片不是 div 的一部分，而且我没有正确理解您的问题，请给我们一个链接或将其添加到jsFiddle 这样我们就可以用肉眼看到问题了。

标签： image html background overflow

【解决方案1】：

将背景放在包含您的<div> 的较大<div> 上。

【讨论】：

【解决方案2】：

您可以通过其他方式做到这一点：

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

【讨论】：

【解决方案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 中工作

【讨论】：