代码之家 › 专栏 › 技术社区 › matt

背景图像能比div本身大吗?

background image css

matt · 技术社区 · 14 年前

我有一个100%宽度的页脚div。根据内容的不同,它大约有50像素高。

有没有可能给那个页脚一个背景图片,让它溢出这个div?

图像大约是800x600px,我希望它位于页脚的左下角。它的工作原理应该类似于我的网站的背景图像,但我已经在我的身体上设置了一个背景图像。我需要另一个图片定位在我的网站左下角和#页脚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 做不到这项工作!

9 回复 | 直到 11 年前

Daniel Bingham 14 年前

我不相信你能使背景图像溢出它的div。放置在图像标签中的图像可以溢出它们的父div,但是背景图像受它们作为背景的div的限制。

148

transGLUKator 11 年前

有一个非常简单的技巧。将div的padding设置为正数,margin设置为负数

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

Aakash 5 年前

可以使用css3 psuedo元素( :before 和/或 :after )如本文所示

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

祝你好运。。。

ArcTanH 10 年前

不,你不能。

但作为一个可靠的解决方案,我建议将第一个div分类为 position:relative 使用 div::before 创建包含图像的基础元素。分类为 position:absolute 你可以把它移到相对于初始div的任何位置。

别忘了给新元素添加内容。下面是一些例子:

div {
  position: relative;
}    

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

注意:如果希望它位于父div的“顶部”,请使用 div::after 相反。

PanPipes 9 年前

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

#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

stephenhay 14 年前

你说已经有了背景图像 body .

你能够打开背景图像 html ,新的 身体 . 这当然取决于你的布局,但你不需要使用你的页脚。

hollsk 14 年前

不是-背景图像由它所应用的元素限定,溢出属性只应用于元素中的内容(即标记)。

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

cambraca 14 年前

This could help . 它要求页脚高度为固定数字。基本上,在页脚div中有一个div,它的内容是普通的 position: absolute ,然后使用 position: relative ,一个否定的 z-index 所以它保持在“低于”一切,并且 top 页脚高度减去图像高度的值(在我的示例中, 50px - 600px = -550px ). 在Chrome8、Firefox3.6和IE9中测试。

Pavlo Kozachuk 6 年前

使用trasform:scale(1.1)属性使bg图像变大,使用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');
    }
}