Question

我现在只是使用HTML和CSS阻止网站上的不同图片，并且我遇到的问题是在较小分辨率下移动到屏幕右侧的符号。

我想要的实际图像（以1600x1024分辨率显示）看起来像这样：http://i.imgur.com/hsGT14m.jpg

但是在较低分辨率（1280x1024）下，它看起来像是：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，这可能适用于我＆＃39 ;我目前没有使用）。

我希望我在这里提供了足够的信息，并期待任何人都可以给予任何帮助。

Answer 1

当您使用绝对定位时，您的父元素位置应该是相对的，否则它将相对于主体定位。根据你的照片你正在寻找这样的东西：

<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，它会让你的网站加载更快。

Answer 2

试试这个 -

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

也许它有效！如果没有，请在您的网站上提供4张图片。

CSS：不同屏幕分辨率下的图像位置校正

2 个答案: