使用DIV作爲另一個元素的背景

如果我有一個包含圖像和文本的div，是否可以使用此div的內容作爲背景，比如section？使用DIV作爲另一個元素的背景

例如，類似的東西：

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的背景。

來源

2014-09-22 Seeven

你的問題很模糊。你想要bg-div和部分共享相同的背景嗎？ – 2014-09-22 09:34:57

我認爲OP想要使用像圖像一樣的div作爲另一個div的背景嗎？ – Azrael 2014-09-22 09:35:51

爲什麼要這樣做：P？簡短的回答你不能 – 2014-09-22 09:37:10

在這裏，我做出了表率與2周的div：

。內容包含您在前端需要
系統技術領域的一切 - 文本，圖像和其他一切背景

要將一個div覆蓋到另一個div上（製作覆蓋圖），您必須將它們放入同一個元素中，在本例中它是#wrapper div。放置位置：包裝的相對和寬度/高度;位置：相對也應該設置爲你的內容div和位置：絕對; top：0;左：0;爲您的背景。

最後一步是設置z-index。在z-index中包含較大值的元素被渲染在具有較小z-索引值的元素之上。換句話說，你應該爲背景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/

來源

2014-09-22 10:16:54 Mevrael

謝謝，我使用'position：fixed;'作爲'.background'元素的方法，它適合Skrollr.js和視差的需求。它確實是一個背景元素。（雖然定位仍然很痛苦） – Seeven 2014-09-22 13:08:01

使用CSS element()函數。見https://developer.mozilla.org/en-US/docs/Web/CSS/element。目前僅在FF下的-moz-element前綴中可用。例如：

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

另一種方法是使用SVG的foreignObject標籤玩，克隆要用作背景到它使用元素的HTML。

規格爲http://dev.w3.org/csswg/css-images/#element-notation。

來源

2014-09-22 09:48:08

雖然CSS'element（）'函數是我正在尋找的，事實證明它不像預期的那樣行爲，除了它只在Firefox上有效。你能告訴我更多關於'foreignObject'標籤？我對SVG不熟悉。 – Seeven 2014-09-22 10:03:13

出於好奇，它是如何表現不如預期？ – 2014-09-22 11:32:41

使用DIV作爲另一個元素的背景

回答

相關問題