div中带有背景图像的div不能正常工作

时间:2014-11-23 15:56:35

标签: html css css3 background

我有一个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;
}

提前感谢。

1 个答案:

答案 0 :(得分:0)

.home div需要绝对定位,以免向后“推”背景div。背景div不应该有fullscreen-img类,因为大多数规则都应该删除。它只需要height: 100%,因为div默认为width: 100%,因为它们是块元素。当然,将内联样式移动到类或ID规则中,我将它们留在那里只是为了向您展示。

基本上你需要的只是:

  • 从背景div中删除.fullscreen-img
  • 将其高度设置为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>)修复/更改您的网站:

  • left:initial;
  • 宽度:1230px;