CSS：在不同屏幕分辨率下的圖像位置更正

我只是使用HTML和CSS屏蔽了網站上的不同圖像，而且我遇到了以較小分辨率移動到屏幕右側的符號問題。CSS：在不同屏幕分辨率下的圖像位置更正

實際圖像我想（和出現在1600x1024分辨率）看起來像這樣：http://i.imgur.com/hsGT14m.jpg

但在較低的分辨率（1280×1024），它看起來像：http://i.imgur.com/byeK41B.jpg

整個頁面的HTML代碼如下：

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="thrall.css"> 
    </head> 
    <body> 

    <img src="images/background.jpg" width="1600" length="1200" class="bg"> 

    <img src="images/titlebox.jpg" class="titlebox"> 

    <img src="images/symbol.png" class="symbol"> 

    <img src="images/transbox.jpg" class="transbox"> 

    </body> 
    </html>

整個頁面的CSS如下：

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -2; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
} 

img.titlebox { 
    /*Keep it bounded for different resolutions*/ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 

    /*Position*/ 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -500px; 
    z-index: -1; 
} 

img.symbol { 
    /*Keep it bounded for different resolutions*/ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
    margin:auto; 

    /*Position*/ 
    position: absolute; 
    top: 5%; 
    left: 20%; 
    } 

    div.containsymbol { 
    width:100%; 
    margin:auto; 
    } 

    img.transbox { 
    /*Keep it bounded for different resolutions*/ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 

    /*Opacity*/ 
    opacity:0.4; 
    filter:alpha(opacity=40); /* For IE8 and earlier */ 

    /*Position*/ 
    position: absolute; 
    top: 21.5%; 
    left: 50%; 
    margin-left: -500px; 
    z-index: -1; 
} 
    }

我認爲這是符號絕對位置的問題，而相對定位可能是一個解決方案，但我缺乏經驗來了解如何實現自己的解決方案9並且可能適用於哪些我不是目前正在使用）。

我希望我在這裏提供了足夠的信息，並期待任何人能給予的幫助。

來源

2013-09-01 Extra Smooth

嘗試這個 -

<img src="images/background.jpg" style="width:100%; height:1200px;" class="bg">

也許它的作品！如果不是，請給您的網站使用4個圖像。

來源

2013-09-01 19:30:51

對不起，它沒有更正符號的位置。使用的四個圖像在這裏：http://imgur.com/LHkfxSZ,T9Ku8uw,n3lCA81,ixA75OS –

請提供完整的CSS代碼。 –

將其添加到主文章。 –

當你使用絕對定位時，你的父元素位置應該是相對的，否則它將相對於主體定位。根據您的圖片你尋找的是這樣的：

<html> 
<body style="margin:0;background:url(images/background.jpg) no-repeat fixed;background-size:100% 100%;"> 
    <div style="background:url(images/titlebox.jpg); width:80%; margin: 0 auto;"> 
     <img src="images/symbol.png" style="width:auto;margin:5%" alt="symbol"/> 
    </div> 
    <div style="background-image:url(images/transbox.jpg); width:80%; margin: 0 auto;min-height:200px;"> 
    </div> 
</body> 
</html>

你也可以使用CSS來設置您的箱子的顏色，而不是使用的img標籤transbox.jpg和titlebox.jpg的，它會使你的網站加載速度更快。

來源

2013-09-01 19:41:01

我已經提供了我所做的所有html編碼。但是謝謝關於盒子的提示。 –

@ExtraSmooth嘗試我的代碼示例，並讓我知道它是否有幫助。 –

混合的結果。一方面，符號*保持在兩個決議之間的位置。另一方面，該頁面現在看起來像：http://i.imgur.com/4uHUMh0.jpg，標題框未附加到圖像的頂部，而且甚至不存在傳送箱。而且一切都很長。雖然有一些很好的東西。 –

CSS：在不同屏幕分辨率下的圖像位置更正

回答

相關問題