CSS - How zur Steuerung der Lücke zwischen hintergrund und container

Ist es möglich, dass ich eine margin/padding zwischen dem Bild im hintergrund und container, die Bild? In anderen Worten, ich brauche zu bewegen, hintergrund Bild sprite_global_v3.png 20px rechts von der linken Grenze der #nav-Grundschule.

Hier die position "0 -470px" werden verwendet, um wählen Sie die richtige Bild von sprite. Und ich weiß nicht, wie ein padding/margin von 20px, um zu erreichen, was ich erwartet hatte.

#nav-primary {
    background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}

<div id="nav-primary">
  <span>Hello World</span>
</div>

Basierend auf http://www.w3schools.com/css/css_background.asp

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Wenn ich das richtig verstanden habe, ist der hintergrund-position verwendet wird zum Steuern der Ausrichtung des Hintergrundbilds. Jetzt brauche ich für die Ausrichtung an und wählen Sie das richtige Bild in einem sprite. Ich weiß nicht, ob oder nicht, ich kann mischen Sie es zusammen.

Danke

InformationsquelleAutor q0987 | 2010-08-26
  1. 2

    Nein, es gibt kein Konzept von padding/margin für hintergrund-Bilder.

    Optionen:

    1) die Positionierung der hintergrund (wie schon gesagt). Der Schlüssel ist, dass die container haben Feste Abmessungen.

    2) Nest ein container einem übergeordneten container. Elternteil bekommt die Polsterung, Kind bekommt das hintergrund-Bild.

    Gegeben, dass Sie versuchen, dies mit einem sprite, beide sind wahrscheinlich Möglichkeiten, da ein sprite zu einer festen Größe container sowieso. Für option 1, würden Sie brauchen, um sicherzustellen, dass Ihre sprite-Bilder haben genug Leerraum zwischen den einzelnen anderen in der Datei.

    • Vielen Dank für die ließ mich wissen, dass "ein sprite hat eine Feste Größe-container"
    • Ich sollte klären,...die container müssten behoben werden, die in mindestens einer dimension, je nachdem, wie Sie das layout Ihrer Bilder in das sprite. Zum Beispiel, f Sie sind alle getrennt vertikal, dann wird Ihr container muß mindestens eine Feste Höhe, so dass das nächste Bild in der sprite nicht zeigen.
    InformationsquelleAutor DA.
  2. 1

    Nein, Sie können nicht mischen Sie zusammen.

    Sie können ein Bild in einem Abstand von der Ecke:

    background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;

    Aber man kann nicht verbinden Sie es mit den sprite-techinque. Diese Technik nutzt die Tatsache, dass das element kleiner ist als das hintergrund-Bild-clip-Bild, aber Sie können nicht clip das hintergrund-Bild um 20 Pixel in das element.

    InformationsquelleAutor Guffa
  3. 0

    Können Sie die genaue position der hintergrund der pixel.

    Wenn Sie wollte einen 10-pixel-Abstand auf der linken Seite, zum Beispiel:

    #nav-primary {
  background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png")   no-repeat scroll transparent;
  background-position:10px 0px;
}

    Dass gesagt wird, es sieht aus wie Sie bereits angegeben ist, eingestellt werden (0, -470). Ist nicht auch arbeiten?

    • Hallo Dutchie432, (0, -470) verwendet wird, um eine richtige Bild, eingebettet in ein riesiges sprite-Bild. Nun möchte ich auch die Kontrolle der Abstand/Rand zwischen dem hintergrund und den container. Aber ich weiß nicht, wie zu mischen der beiden zusammen. Danke
    • (0, -470), ist das setzen der background-position-Eigenschaft. Wenn Sie wollte einen 10-pixel-Abstand auf der rechten Seite, Sie würde es (10, -470)...
    InformationsquelleAutor Dutchie432
  4. 0

    Die background-position-Eigenschaft ermöglicht die Prozentsätze und-Werte, z.B. "20px 0", die ich denke, ist, was Sie suchen.

    InformationsquelleAutor Anthony -GISCOE-
Schreibe einen Kommentar