CSS: Image positions-Korrekturen bei unterschiedlichen Bildschirmauflösungen

Ich bin einfach zu blockieren, und verschiedene Bilder auf einer site jetzt mit HTML und CSS und ich haben ein problem mit einer symbol-verschieben nach rechts des Bildschirms bei kleineren Auflösungen.

Dem tatsächlichen Bild, das ich will (und das scheint bei 1600x1024 Auflösung) sieht so aus: http://i.imgur.com/hsGT14m.jpg

Aber bei niedrigeren Auflösungen (1280x1024) sieht es so aus: http://i.imgur.com/byeK41B.jpg

Den HTML-code für die ganze Seite ist wie folgt:

   <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>

Den CSS-Code für die ganze Seite ist wie folgt:

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;
}
  }

Entnehme ich, dass dies ein Problem mit dem symbol ist die absolute position und relative Positionierung könnte eine Lösung sein, aber mir fehlt die Erfahrung, um zu sehen, wie sich eine Auflösung myself9and, die gelten könnte, auf die ich derzeit nicht verwenden).

Ich hoffe ich habe genug Informationen hier und freue mich auf jede Hilfe, die jemand geben kann.

InformationsquelleAutor Extra Smooth | 2013-09-01
  1. 1

    Wenn Sie absolute Positionierung Ihres übergeordneten Elements, position relative sonst wird es relativ positioniert, um den Körper. nach Ihren Bilder, die Ihr auf der Suche nach so etwas wie dieses:

    <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>

    auch Sie können css verwenden, um die Farbe Ihrer Boxen anstelle der Verwendung von img-tags transbox.jpg und titlebox.jpg es würde machen Sie Ihre Website schneller geladen werden kann.

    • Ich habe vorausgesetzt, die html-Codierung, die ich getan habe. Aber danke für den Tipp über die Boxen.
    • versuchen, mein code-Beispiel, und lassen Sie mich wissen, wenn es hilft.
    • Gemischte Ergebnisse. Auf der einen Seite das symbol konnte bleiben an Ihrem Ort zwischen den Auflösungen. Auf der anderen Seite sieht nun folgendermaßen aus: i.imgur.com/4uHUMh0.jpg mit der titelbox nicht an der Oberseite des Bildes und die transbox gar nicht vorhanden ist. Und alles insgesamt zu lange. Gab es etwas gutes gibt es aber.
    • sollte man mit min-height für die transbox zu erscheinen und für den Rand von oben die margin:0, bearbeitete ich die Antwort, es zu versuchen.
    InformationsquelleAutor Meysam Naderi
  2. 0

    Versuchen, diese-

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

    Vielleicht klappt es! Wenn nicht, geben Sie bitte 4 Bilder auf Ihrer Website verwendet werden.

    • Sorry, es war auch nicht die richtige position des symbols. Die vier verwendeten Bilder sind hier: imgur.com/LHkfxSZ,T9Ku8uw,n3lCA81,ixA75OS
    • Bitte geben Sie die vollständige css-code.
    • Hinzugefügt, um die wichtigsten Artikel.
    InformationsquelleAutor Arif Khan
Schreibe einen Kommentar