Div内div包括背景图片

问题描述：

我有两个div。第一个是“父”，它提供了另一个div的宽度和高度。第二个div具有背景附件：固定并存在问题...当宽度：100％和高度：100％时，我的图像不会显示。当图像的高度为800px时，一切都很好，但是当我更改屏幕分辨率时，第一个div不会与图像一起缩放，因此图像与其余内容之间有空白区域。任何想法如何解决它？感谢您的答复！Div内div包括背景图片

<div class="divimgparent"> 
<div class="divimg"></div> 
</div> 
.divimgparent {width: 100%; height: auto;} 
.divimg {background: url("../images/1.jpg"); width: 100%; height: 800px; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

是的，这是因为你需要给父母或孩子的'高度'。 'height：auto;'基于你拥有的内容工作。它没有特定的高度，在100％的情况下，它认为'.divparentimg' – divy3993

的100％更改了background-size css属性。 'background-size：cover;'然后图像将根据屏幕分辨率拉伸。 –

答

试试这个。这里你的父母的div没有得到你的CSS高度时的高度：auto ;.所以，你需要为你的父div定义一个高度。

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.divimgparent { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.divimg {background: url("http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg");width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

<div class="divimgparent"> 
 
<div class="divimg"></div> 
 
</div>

答

<div class="divimgparent"> 
    <div class="divimg"></div> 
</div>

.divimgparent {width: 100%; height: 90vh;} 
 
.divimg {background: url("http://s9.postimg.org/bxayc3y3z/Desert.jpg"); width: 100%; height:100%; background-repeat: no-repeat; background-size: contain; background-attachment: fixed;}

请试试这个。

demo

Div内div包括背景图片

相关推荐