Question

您好我如何强制wpdemos_wrapper div将其高度基于内容？如果我移除高度900px，第二个背景就不会出现。

div.wpdemos_wrapper 
{   
    position: relative;     
    min-height:100%;    
    padding:0 0 20px;   
    background-image: url("./images/body/bg_honeycomb_top.png");    
    background-repeat: no-repeat;   
    background-position: top center;    
    background-size: contain;   
    width: 100%;    
    z-index: 0;     
    height: 900px; 
} 
div.wpdemos_wrapper:before 
{   
    position: absolute;     
    content: "";    
    background-image: url("./images/body/bg_honeycomb_bottom.png");     
    background-repeat: no-repeat;   
    background-position: bottom center;     
    background-size: contain;   
    width: 100%;    
    bottom: 0;  
    left: 0;    
    height: 100%;   
    z-index: -1; 
}

Answer 1

我认为将bg_honeycomb_top.png图片应用于:before伪元素，然后将bg_honeycomb_bottom.png图片应用于主div.wpdemos_wrapper会更加容易。 :before伪元素出现在div中的内容之前，因此这样更容易。 :)然后你可以删除主div上的固定高度并稍微清理一下。

示例代码

这将允许您在div的顶部和底部的整个宽度上重复背景图像。这是针对图片使用repeat-x，但如果您需要，可以将其更改为contain。：）

div.wpdemos_wrapper {
    padding:0 0 20px;
    background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_bottom.png") repeat-x bottom center;
}
div.wpdemos_wrapper:before {
    display: block;
    content: " ";
    background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_top.png") repeat-x top center;
    height: 20px; /* height of the background image */
    width: 100%;
}

Answer 2

这是我的新代码nerwood。现在它正在处理高度问题。然而，顶级背景不会出现..

    div.wpdemos_wrapper {
        position: relative; 
        padding:0 0 20px;
        background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_bottom.png") no-repeat bottom center/contain;
        width: 100%;
    }
    div.wpdemos_wrapper:before {
        position: absolute;
        content: "";
        background: rgba(0,0,0,0) url("./images/body/bg_honeycomb_top.png") no-repeat top center/contain;
        width: 100%;
    }

Answer 3

您可以在display: table上使用div.wpdemos_wrapper并在其子级上使用相应的display: table-cell吗？然后，即使没有明确的高度，包装器也总是与它们的孩子一样高。

div高度取决于具有伪代码的内容div

3 个答案:

示例代码