html代碼在一個背景圖像在不同位置的三個圖像

我在html代碼中使用多個div。每個div將保存1600 * 750的圖像。每個div裏面我都有固定的圖片。這些圖片會在每個div上重複播放，我將這些圖片稱爲每個div上的圖片。我的第一圖像是218 * 73 我的第二圖像是774 * 209 我的第三個是127 * 37html代碼在一個背景圖像在不同位置的三個圖像

欲解決我的第一圖像位置在137 * 88我的背景的div圖像。 655 * 339的背景div圖像的第二幅圖像。 708 * 670背景div圖像的第三幅圖像。

我不想用身體修復爲背景圖像，因爲我在所有div上都有三個修復圖像的多個div。

任何一個可以告訴如何使用類爲多個div來解決這些問題。提前感謝

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My page</title> 
<title>jQuery Parallax Plugin Demo</title> 
<link rel="stylesheet" type="text/css" href="sd.css" /> 

</head> 

    <body> 
<div id="a"> 
    <div id="first" > 
     <div class="c d" > 

     This is my first div to display image. 





    </div>--> 


</body> 
</html>

CSS

body{ 
    margin: 0; 
    min-width: 980px; 
    padding: 0; 
    padding: 0; 
} 

div { 
    -webkit-perspective: 500px; /* Chrome, Safari, Opera */ 
    perspective: 500px; 
} 


#first{ 
    width: 100%; 
} 


#first{ 

    background:url('images/rc1.jpg') 50% 0 no-repeat fixed; 
    color: white; 
    height: 600px; 
    margin: 0 auto; 
    padding: 160px 0 0 0; 
    padding: 0; 
    perspective: 1px; 

} 
#first .d{ 
    margin: auto; 
    position: relative; 

    width:=655px; 
    height:339px; 
    background: url('images/Logo.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 

} 
#first .c{ 
    margin: auto; 
    position: relative; 

    width:=137px; 
    height:88px; 
    background: url('images/big_text.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 

} 
#first .e{ 
    margin: auto; 
    position: relative; 
    overflow-x: 708px; 
    overflow-y: 670px; 

    background: url('images/big_text.png'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 

}

來源

2015-11-03 dippune

下面的代碼顯示了一個例子與您的圖像的大小和位置：

body { 
 
    background-image:url('http://placehold.it/1600x750'); 
 
} 
 
.first { 
 
    background-image:url('http://placehold.it/218x73'); 
 
    border:1px dashed #000; 
 
    display:block; 
 
    height:73px; 
 
    left:137px; 
 
    position:absolute; 
 
    top:88px; 
 
    width:218px; 
 
} 
 
.second { 
 
    background-image:url('http://placehold.it/774x209'); 
 
    border:1px dashed #000; 
 
    display:block; 
 
    height:209px; 
 
    left:655px; 
 
    position:absolute; 
 
    top:339px; 
 
    width:774px; 
 
} 
 
.third { 
 
    background-image:url('http://placehold.it/127x37'); 
 
    border:1px dashed #000; 
 
    display:block; 
 
    height:37px; 
 
    left:708px; 
 
    position:absolute; 
 
    top:670px; 
 
    width:127px; 
 
}

<div class="first"></div> 
 
<div class="second"></div> 
 
<div class="third"></div>

來源

2015-11-03 07:56:34

感謝，但我有具有不同圖像的所有的1600 * 750和三個固定的圖像應用爲前景，並在相同的位置上我用類到多個div.so所有背景圖像上的多個格調用多個div上的所有三個圖像，所以我不能用它作爲背景圖像 – dippune

你能創建一個片段嗎？該div沒有關閉，首先和c div在div「a」之內？

<div id="a"> 
<div id="first" > 
    <div class="c d" > 

    This is my first div to display image.

來源

2015-11-03 07:57:56

html代碼在一個背景圖像在不同位置的三個圖像

回答

相關問題