多個圖像對齊問題在css

我是新來的CSS和HTML。我做了一個應用程序，並在HTML和CSS的頁面。這是我的網頁的圖片：多個圖像對齊問題在css

home page

這是我的.css文件的代碼片段：

body{ 
    background-color:#D8D8D8; 
    background-image:url("../images/spring.png"), url("../images/security.png"); 
    background-size:200px 100px, 200px 100px; 
    background-repeat:no-repeat, no-repeat; 
    background-position:top right, bottom right; 
    margin-right:200px; 
    margin-left:15px; 
    }

問題：正如你所看到的，兩頁中的圖像不對齊，我需要第二個圖像位於頁面的底部，就像第一個圖像位於頁面的最頂部。任何人都可以指導我如何去做。我很抱歉這門語言太糟糕了。謝謝。

來源

2012-02-28 AbdulAziz

我不知道它是如何工作的，你（在同一對象兩個背景圖像），但你可以使用此代碼：

<html> 
    <head> 
     <style> 
      img.first_image { position: absolute; top: 0px; } 
      img.second_image { position: absolute; bottom: 0px; } 
      body 
      { background-color:#D8D8D8; 
       background-size:200px 100px, 200px 100px; 
       background-repeat:no-repeat, no-repeat; 
       background-position:top right, bottom right; 
       margin-right:200px; 
       margin-left:15px; 
       height:100%; 
      } 
     </style> 
    </head> 
    <body> 
     <img src="../images/spring.png" class="first_image" /> 
     <div> 
      <!-- every things you need --> 
     </div> 
     <img src="../images/security.png" class="second_image" /> 
    <body> 
</html>

來源

2012-02-28 16:22:26 samra

將height:100%添加到body和html。

來源

2012-02-28 15:20:45 bookcasey

請你能引導我米礦石。我的意思是你可以更精確的如何添加到HTML？我在正文中添加了，但在html中添加的位置？謝謝 – AbdulAziz 2012-02-29 09:25:58

'html {height：100％; }' – bookcasey 2012-02-29 15:39:06

嘗試像

body,html {height: 100%; width: 100%;} 

#image-id {position: absolute; bottom: 0; right: 0;}

來源

2012-02-28 15:22:13

都設置圖片位置予以確定。然後第一個右上角，第二個右下角。然後，即使頁面內容變得更長且可滾動，您仍然可以在任何時候處於希望的位置。

來源

2012-02-28 15:26:45

你是這個意思嗎？ '背景 - 位置：固定，固定;' – AbdulAziz 2012-02-29 09:21:27

這似乎是身體不是頁面的整個高度嘗試

body{ 
    background-color:#D8D8D8; 
    background-image:url("../images/spring.png"), url("../images/security.png"); 
    background-size:200px 100px, 200px 100px; 
    background-repeat:no-repeat, no-repeat; 
    background-position:top right, bottom right; 
    margin-right:200px; 
    margin-left:15px; 
    height:100%; 
}

這也許是有點過分，但...這可能是值得將其設置爲height:95%;如果它會導致滾動條出現

來源

2012-02-28 15:29:38 imma

多個圖像對齊問題在css

回答

相關問題