我有一个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;
}
提前感谢。
答案 0 :(得分:0)
.home
div需要绝对定位,以免向后“推”背景div。背景div不应该有fullscreen-img
类,因为大多数规则都应该删除。它只需要height: 100%
,因为div默认为width: 100%
,因为它们是块元素。当然,将内联样式移动到类或ID规则中,我将它们留在那里只是为了向您展示。
基本上你需要的只是:
.fullscreen-img
类.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>
)修复/更改您的网站: