0

我现在只是使用 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 并且可能适用于我目前未使用的解决方案）。

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

4

2 回答 2

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，这会使您的网站加载速度更快。

于 2013-09-01T19:41:01.540 回答
0

尝试这个-

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

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

于 2013-09-01T19:30:51.937 回答