Use a DIV as a background for another element

前端 未结 2 1768
后悔当初
后悔当初 2020-12-25 13:28

If I have a div that contains images and text, is it possible to use this div\'s content as a background for, let\'s say, a section ?<

相关标签:
2条回答
  • 2020-12-25 13:39

    Here I made an example with 2 divs:

    • .content which contains everything you need in frontend
    • .background - with text, images and everything else in background

    To overwrap one div on another (make an overlay) you have to put them into same element, in this example it's #wrapper div. Put position: relative and width/height for wrapper; position: relative also should be set for your content div and position: absolute; top: 0; left: 0; for your background.

    The final step is to setup z-index. Element containing a bigger value in z-index is rendered above elements with smaller z-index value. In other words you should set z-index for background div smaller then for content div.

    Final HTML:

    <div id="wrapper">
        <div class="content">    
            <p>This text is in frontend</p>
        </div>
        <div class="background">
            <p>Background text</p>
            <img src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" alt="background" />
            <img src="http://upload.wikimedia.org/wikipedia/en/0/0c/IrfanView_Logo.png" alt="background 2" />
    
        </div>
    </div>
    

    Final CSS:

    #wrapper{
        position: relative;
        width: 200px;
        height: 200px;
    }
    
    .content{
        color: #FFFFFF;
        font-size: 26px;
        font-weight: bold;
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
        position: relative;
        z-index: 100;
    }
    
    .background{
        color: #999999;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -100;
    }
    

    View live example:

    http://jsfiddle.net/1fevoyze/

    0 讨论(0)
  • 2020-12-25 13:47

    Use the CSS element() function. See https://developer.mozilla.org/en-US/docs/Web/CSS/element. Currently available only in FF under the -moz-element prefix. Example:

    <div style="width:400px; height:100px; background:-moz-element(#backgroundElt);">
    

    An alternative would be to play with SVG's foreignObject tag, cloning the HTML for the element you want to use as background into it.

    Spec is at http://dev.w3.org/csswg/css-images/#element-notation.

    0 讨论(0)
提交回复
热议问题