添加到div

style="overflow:hidden;"

在Umbraco CMS中有这个问题，在这种情况下，你可以使用div的'style'属性将图像添加到div:

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

这个怎么样?

.fixed-centered-covers-entire-page { 保证金:汽车; 背景图片:url (https://i.imgur.com/Ljd0YBi.jpg); 平铺方式:不再重演;background-size:封面; 背景位置:50%; background - color: # fff; 左:0; 右:0; 上图:0; 底部:0; z - index: 1; 位置:固定; ｝ < div class = " fixed-centered-covers-entire-page " > < / div >

演示:http://jsfiddle.net/josephmcasey/KhPaF/

受到最受欢迎的答案的启发，我最终想出了一个使用min-height和“vw”单位的解决方案

我得到了一个比例非常不寻常的图像

通过我最终使用的实验

    min-height: 36vw;

该值必须根据图像的比例变化

CSS代码使用在我的实际页面:

    background:url('your-background-image-adress') center center no-repeat;
    background-size: 100%;
    background-position: top center;
    margin-top: 50px;
    width: 100%;
    min-height: 36vw;

码笔示例https://codepen.io/viniciusrad/pen/GRNPXoL

我会做相反的事情，将图像放在主div中，宽度为100%，这将使div和图像都响应屏幕大小，

然后在主div的宽度和高度为100%的绝对定位div中添加内容。

<div class="main" style="position: relative; width: 100%;">
    <img src="your_image.png" style="width: 100%;">
    <div style="position: absolute; width: 100%; height: 100%; display: flex...">
            YOUR CONTENT
    </div>
</div>

这可能会有帮助，这不是一个确切的背景，但你明白这个简单的想法吗

    <style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>