Kann ich Hintergrundfarbe nur zum Auffüllen hinzufügen?

Ich habe ein Header-Feld mit Rahmen und Auffüllung sowie Hintergrundfarbe für dieses Feld. Kann ich die Hintergrundfarbe nur für den aufgefüllten Bereich nach dem Rand und dann die gleiche Hintergrundfarbe für den Rest der Breite ändern (dh Grau im angegebenen Code)? ?

Nur eine Prise Code, in dem ich die gepolsterte Hintergrundfarbe haben möchte:

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
}

Eine andere Option mit reinem CSS wäre ungefähr so:

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

Demo hier

Es tut mir allen leid, dass dies die wahre Lösung ist, bei der Sie die Polsterung nicht wirklich einstellen müssen.

http://jsfiddle.net/techsin/TyXRY/1/

Was habe ich getan...

• Wendet zwei Farbverläufe auf den Hintergrund an, wobei beide eine Start- und eine Endfarbe haben. Anstatt einfarbig zu verwenden. Grund dafür ist, dass Sie nicht zwei Volltonfarben für einen Hintergrund haben können.
• Wenden Sie dann jeweils unterschiedliche Hintergrundclip-Eigenschaften an.
• Auf diese Weise wird eine Farbe auf das Inhaltsfeld und die andere auf den Rand ausgedehnt, wodurch die Polsterung sichtbar wird.

Clever, wenn ich es mir sage.

div {
    padding: 35px;
    background-image:
      linear-gradient(to bottom,
        rgba(240, 255, 40, 1) 0%,
        rgba(240, 255, 40, 1) 100%),
      linear-gradient(to bottom,
        rgba(240, 40, 40, 1) 0%,
        rgba(240, 40, 40, 1) 100%);
    background-clip: content-box, padding-box;
}

Verwenden Sie die Eigenschaften background-clipund box-shadow.

1) Festlegen background-clip: content-box- Hiermit wird der Hintergrund nur auf den Inhalt selbst beschränkt (anstatt sowohl den Abstand als auch den Rand abzudecken).

2) Fügen Sie ein Inneres hinzu, box-shadowdessen Ausbreitungsradius auf den gleichen Wert wie die Polsterung eingestellt ist.

Angenommen, die Polsterung ist 10px - eingestellt box-shadow: inset 0 0 0 10px lightGreen- wodurch nur der Polsterbereich hellgrün wird.

Codepen-Demo

nav {
  width: 80%;
  height: 50px;
  background-color: gray;
  float: left;
  padding: 10px; /* 10px padding */
  border: 2px solid red;
  background-clip: content-box; /* <---- */
  box-shadow: inset 0 0 0 10px lightGreen; /* <-- 10px spread radius */
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

<h2>The light green background color shows the padding of the element</h2>
<nav>
  <ul>
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="/about/">About</a>
    </li>
    <li><a href="/blog/">Blog</a>
    </li>
  </ul>
</nav>

Ein ausführliches Tutorial zu dieser Technik finden Sie in diesem großartigen CSS-Trick-Beitrag

Sie können für diesen Effekt Hintergrundverläufe verwenden. Fügen Sie für Ihr Beispiel einfach die folgenden Zeilen hinzu (es ist nur so viel Code, weil Sie Herstellerpräfixe verwenden müssen):

background-image: 
    -moz-linear-gradient(top, #000 10px, transparent 10px),
    -moz-linear-gradient(bottom, #000 10px, transparent 10px),
    -moz-linear-gradient(left, #000 10px, transparent 10px),
    -moz-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -o-linear-gradient(top, #000 10px, transparent 10px),
    -o-linear-gradient(bottom, #000 10px, transparent 10px),
    -o-linear-gradient(left, #000 10px, transparent 10px),
    -o-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    -webkit-linear-gradient(top, #000 10px, transparent 10px),
    -webkit-linear-gradient(bottom, #000 10px, transparent 10px),
    -webkit-linear-gradient(left, #000 10px, transparent 10px),
    -webkit-linear-gradient(right, #000 10px, transparent 10px);
background-image: 
    linear-gradient(top, #000 10px, transparent 10px),
    linear-gradient(bottom, #000 10px, transparent 10px),
    linear-gradient(left, #000 10px, transparent 10px),
    linear-gradient(right, #000 10px, transparent 10px);

Keine Notwendigkeit für unnötiges Markup.

Wenn Sie nur einen doppelten Rand haben möchten, können Sie Umriss und Rand anstelle von Rand und Abstand verwenden.

Sie könnten zwar auch Pseudoelemente verwenden, um den gewünschten Effekt zu erzielen, aber ich würde davon abraten. Pseudo-Elemente sind ein sehr mächtiges Werkzeug, das CSS bietet. Wenn Sie sie für solche Dinge "verschwenden", werden Sie sie wahrscheinlich woanders vermissen.

Ich benutze Pseudoelemente nur, wenn es keinen anderen Weg gibt. Nicht weil sie schlecht sind, ganz im Gegenteil, weil ich meinen Joker nicht verschwenden will.

Die Antworten sagten alle möglichen Lösungen

Ich habe noch eine mit BOX-SHADOW

hier ist es JSFIDDLE

und der Code

nav {
    margin:0px auto;
    width:100%;
    height:50px;
    background-color:grey;
    float:left;
    padding:10px;
    border:2px solid red;
    box-shadow: 0 0 0 10px blue inset;
}

Es wird auch in IE9 unterstützt. Es ist also besser als eine Verlaufslösung. Fügen Sie geeignete Präfixe hinzu, um mehr Unterstützung zu erhalten

IE8 unterstützt es nicht, was für eine Schande!

Sie können die Farbe der Polsterung nicht einstellen.

Sie müssen ein Wrapper-Element mit der gewünschten Hintergrundfarbe erstellen. Fügen Sie diesem Element einen Rand hinzu und legen Sie die Auffüllung fest.

Ein Beispiel finden Sie hier: http://jsbin.com/abanek/1/edit

Dies wäre eine richtige CSS-Lösung, die auch für IE8 / 9 funktioniert (IE8 natürlich mit html5shiv): codepen

nav {
  margin:0px auto;
  height:50px;
  background-color:gray;
  padding:10px;
  border:2px solid red;
  position: relative;
  color: white;
  z-index: 1;
}

nav:after {
  content: '';
  background: black;
  display: block;
  position: absolute;
  margin: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

Es gibt keine genaue Funktionalität, um dies zu tun.

Ohne ein weiteres Element darin zu verpacken, können Sie den Rand durch einen Kastenschatten und den Abstand durch den Rand ersetzen. Denken Sie jedoch daran, dass der Kastenschatten die Abmessungen des Elements nicht erhöht.

jsfiddle ist sehr langsam, sonst würde ich ein Beispiel hinzufügen.

Ich würde einfach den Header mit einem anderen Div umschließen und mit Rändern spielen.

<div class="header-border"><div class="header-real">

    <p>Foo</p>

</div></div>

CSS:

.header-border { border: 2px solid #000000; }
.header-real { border: 10px solid #003399; background: #cccccc; padding: 10px; }

Sie können die Auffüllung wie folgt verteilen:

<div id= "paddingOne">
</div>
<div id= "paddingTwo">
</div>

#paddingOne {
width: 100;
length: 100;
background-color: #000000;
margin: 0;
z-index: 2;
}
#paddingTwo {
width: 200;
length: 200;
background-color: #ffffff;
margin: 0;
z-index: 3;

Die Breite, Länge, Hintergrundfarbe, Ränder und der Z-Index können natürlich variieren, aber um die Polsterung abzudecken, muss der Z-Index höher als 0 sein, damit er über der Polsterung liegt. Sie können an der Positionierung und dergleichen herumspielen, um die Ausrichtung zu ändern. Hoffentlich hilft das!

PS die divs sind html und die #paddingOne und #paddingTwo sind css (falls jemand das nicht bekommen hat :)