我有一个 div,背景图片放在另一个 div 中,而不是适合宽度的父 div,它适合全屏。请看一下我的代码就清楚了,抱歉英语不好。
http://codepen.io/thehung1724/full/jEEgQq/
HTML
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="fullscreen-img" style="background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: relative;
top: 0;
width: 100%;
}
.fullscreen-img {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: auto;
left: 0;
min-height: 500px;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
提前致谢。
最佳答案
.home
div 需要绝对定位,以免将背景 div 向下“推”。背景 div 不应该有 fullscreen-img
类,因为大多数规则应该被删除。它只需要 height: 100%
因为 div 有 width: 100%
默认情况下,因为它们是 block 元素。当然,将内联样式移动到类或 ID 规则中,我将它们留在那里只是为了向您展示。
这基本上就是您所需要的:
- 删除
.fullscreen-img
来自背景 div 的类 - 改为将其高度设置为 100%
- 制作
.home
div 绝对定位
在这里查看:http://codepen.io/anon/pen/azzexY
*{
margin: 0;
padding: 0;
}
body {
background-color: black;
}
#video-section{
margin: 0 auto;
width: 1230px;
height: 500px;
}
.dark-section{
background-color: black;
}
.home{
display: table;
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div id="video-section" class="dark-section">
<div class="home"></div>
<div class="" style="height: 100%; background-image: url(http://upanh.biz/images/2014/11/23/bg1.jpg)"></div>
</div>
更新
为您的网站修复/更改有问题的元素 ( <div style="background-image: url('images/bg2.jpg');" class="fullscreen-img img-after"></div>
):
- 左:初始;
- 宽度:1230px;
关于html - div 中带有背景图像的 Div 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27090930/