背景图像可以大于 div 本身吗？

Posted 2023-03-06

【中文标题】背景图像可以大于 div 本身吗？

【英文标题】：Can a background image be larger than the div itself?

【发布时间】：2011-05-15 22:02:06

【问题描述】：

我有一个 100% 宽度的页脚 div。它大约 50 像素高，具体取决于其内容。

是否可以给那个#footer 一个背景图片，这种图片会溢出这个div？

图片大小约为 800x600px，我希望它位于页脚的左下角。它应该有点像我网站的背景图片，但我已经在我的身体上设置了背景图片。我需要在我的网站左下角放置另一张图片，#footer div 非常适合。

#footer 
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;

图像设置为页脚，但不会溢出 div。有可能实现吗？

overflow:visible 不能胜任！

【参考方案1】：

您可以使用本文所示的 css3 伪元素（:before 和/或 :after）

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

祝你好运……

【讨论】：

我更喜欢这种方法，因为它不会干扰#wrapper 元素的定位（例如，如果您需要将其与margin: 0 auto; 居中）

【参考方案2】：

使用 trasform: scale(1.1) 属性使背景图像变大，用 position: relative 向上移动；顶部：-10px；

<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: 
        size: contain;
        image: url('image.svg');
    

【参考方案3】：

使用背景大小的封面对我有用。

#footer 
    background-color: #eee;
    background-image: url(images/bodybgbottomleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;

显然要注意支持问题，请查看我可以使用：http://caniuse.com/#search=background-size

【参考方案4】：

不，你不能。

但作为一个可靠的解决方法，我建议将第一个 div 分类为 position:relative 并使用 div::before 创建包含您的图像的底层元素。分类为position:absolute，您可以将其移动到相对于初始 div 的任何位置。

不要忘记向该新元素添加内容。举个例子：

div 
  position: relative;
    

div::before 
  content: ""; /* empty but necessary */
  position: absolute;
  background: ...

注意：如果您希望它位于父 div 的“顶部”，请改用 div::after。

【讨论】：

它对您有什么作用？ position absolute 使元素位于“before”块的每个未定位的兄弟元素之上，即 div 的全部内容

【参考方案5】：

有一个非常简单的技巧。将该 div 的内边距设置为正数，边距设置为负数

#wrapper 
     background: url(xxx.jpeg);
     padding-left: 10px;
     margin-left: -10px;

【讨论】：

谢谢，我认为这应该被接受。

【参考方案6】：

您提到body 上已经有背景图片。

您可以在html 上设置背景图片，在body 上设置新图片。这当然取决于您的布局，但您不需要为此使用页脚。

【参考方案7】：

This could help。 它要求页脚高度为固定数字。基本上，您在页脚 div 中有一个 div，它是正常内容，position: absolute，然后是带有position: relative 的图像，一个负的z-index，所以它保持“低于”所有内容，一个负的top 值为页脚的高度减去图像高度（在我的示例中，50px - 600px = -550px）。在 Chrome 8、FireFox 3.6 和 IE 9 中测试。

【参考方案8】：

并非如此 - 背景图像受其应用的元素的限制，溢出属性仅适用于元素内的内容（即标记）。

不过，您可以在页脚 div 中添加另一个 div 并将背景图像应用到该 div 中，然后让其溢出。

【参考方案9】：

我不相信你可以让背景图片溢出它的 div。放置在 Image 标签中的图像可能会溢出其父 div，但背景图像受其作为背景的 div 的限制。