重疊div的（是的，再次！）

我正在建立一個產品配置器。我需要2張圖片重疊。想象一下爐子，爐子本身就是一個圖像，旋鈕/另一個手柄。重疊div的（是的，再次！）

兩幅圖像的大小相同，所以它們應該完全重疊。這兩個圖像都在一個div內，並基於一個返回div.append（Child）的函數。

我已經嘗試了我在網上找到的每一種方式，做我認爲是對的，但它顯然不工作。如果我打電話給1 div然後另一個（img1img2），他們不重疊。如果我在第一個div內調用第二個圖像，它不會顯示。我在做什麼錯了？ HTML：

<input type="button" onclick="create_img(); " value="Create image" /> 
    <div class="imageWrapper"> 
    <div id="pop" > 
    <div id="pop2" > 
    </div> 
    </div> 
    </div>

JS：

function create_img(){ 


var im="" 
var div = document.getElementById("pop"); 
var hold= document.createElement("img"); 

if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12"){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;} 
else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13"){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;} 
else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";} 

hold.src=im; 
hold.border=0; 
div.appendChild(hold); 

var im2="" 
var div = document.getElementById("pop2"); 
var hold= document.createElement("img"); 

if (document.Lacanche_Configurator.Finishes.value=="1"){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;} 
else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";} 

hold.src=im2; 
hold.border=0; 
div.appendChild(hold); 
}

CSS：

我已經試了很多方法，不知道下一步該怎麼做！

謝謝！

來源

2013-10-16 user2877438

如果您只需要堆疊2張圖像，那麼您應該可以使用一個<IMG/>標籤來完成此操作。將<IMG/>標籤的CSS背景圖像設置爲爐子的圖片。然後將<IMG/>標籤的src屬性設置爲旋鈕。

來源

2013-10-16 21:43:19 David

謝謝大衛。我不確定是否可以使用img標籤，因爲每個圖像都是由函數創建的，但是您的答案激勵我在函數本身內執行相同的操作。有效。 – user2877438

因此，遵循David的建議並對正確的語法做了更多的研究，這就是我想出的。該函數根據列出的參數創建圖像（im和im2），然後將其中一個定義爲bg圖像，另一個定義爲src圖像。所以它看起來像我真的不需要CSS這個特定的問題。

再次感謝大衛！通過讓別人爲我設計這一點，爲我節省了很多時間，頭痛和金錢！

function create_img(){ 


       var im="" 
       var div = document.getElementById("pop"); 
       var hold= document.createElement("img"); 

       if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="12"){im= "http://www.french-barn.com/configurator/img_front/cormatin/jauneprovence.jpg" ;} 
       else if (document.Lacanche_Configurator.Range.value=="1" && document.Lacanche_Configurator.Range_color.value=="13"){im= "http://www.french-barn.com/attachments/Image/Lacanche/Ranges_front/Chagny1800-trans.png" ;} 
       else {im="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";} 

       var im2="" 
       var div = document.getElementById("pop"); 
       var hold= document.createElement("img"); 

       if (document.Lacanche_Configurator.Finishes.value=="1"){im2= "http://www.french-barn.com/configurator/img_front/cormatin/laitonbrillant.png" ;} 
       else if (document.Lacanche_Configurator.Finishes.value=="2"){im2= "http://www.french-barn.com/configurator/img_front/cormatin/nickel.png" ;} 
       else {im2="http://technofriends.files.wordpress.com/2008/03/google_logo_.jpg";} 

       hold.src=im2; 
       hold.border=0; 
       div.appendChild(hold); 
       div.style.backgroundImage = 'url("'+im+'")'; 


       }

來源

2013-10-16 23:29:18 user2877438

重疊div的（是的，再次！）

回答

相關問題