web-dev-qa-db-ja.com

DIVを別の要素の背景として使用する

画像とテキストを含むdivがある場合、このdivのコンテンツをsectionの背景として使用できますか？

たとえば、次のようなもの：

HTML：

<section id="sec1">
    <div id="bg-div">
        <em>This is a background</em>
        <img src="image1">
        <img src="image2">
    </div>
</section>

およびCSS：

#sec1 {
    background: src(#bg-div);
}

このように、divの背景のように振る舞うsectionコンテンツを持つことができます。

htmlcssbackgroundbackground-image
14
Seeven

ここでは、2つのdivを使用した例を作成しました。

  • フロントエンドで必要なすべてを含む.content
  • .background-テキスト、画像、その他すべてをバックグラウンドで

あるdivを別のdivにオーバーラップ（オーバーレイを作成）するには、それらを同じ要素に配置する必要があります。この例では#wrapper divです。配置位置：ラッパーの相対および幅/高さ。 position：relativeは、コンテンツdivおよびposition：absoluteにも設定する必要があります。 top：0;左：0;あなたの背景。

最後のステップは、z-indexをセットアップすることです。 z-indexの値が大きい要素は、z-index値が小さい要素の上にレンダリングされます。つまり、背景divのz-indexをコンテンツdivより小さく設定する必要があります。

最終的な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>

最終的な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;
}

ライブ例を見る：

http://jsfiddle.net/1fevoyze/

25
Mevrael

CSS element()関数を使用します。 https://developer.mozilla.org/en-US/docs/Web/CSS/element を参照してください。現在、-moz-elementプレフィックスの下のFFでのみ利用可能です。例：

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

別の方法は、SVGのforeignObjectタグを使用して、背景として使用する要素のHTMLを複製することです。

仕様は http://dev.w3.org/csswg/css-images/#element-notation にあります。

2
user663031