Czy mogę dodać kolor tła tylko do wypełnienia?

Mam pole nagłówka zawierające obramowanie i wypełnienie oraz kolor tła dla tego pola, czy mogę zmienić kolor tła tylko dla obszaru wypełnionego po obramowaniu, a następnie ten sam kolor tła dla reszty szerokości (tj. Szary w podanym kodzie) ?

Tylko szczypta kodu, w którym chcę mieć wyściełany kolor tła:

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

Inną opcją z czystym CSS byłoby coś takiego:

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 tutaj

Przykro mi wszystkim, że jest to rozwiązanie prawdziwe, w którym nie trzeba faktycznie ustawiać wypełnienia.

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

Co zrobiłem ...

• Zastosowano dwa gradienty na tle, z których oba mają jeden kolor początkowy i końcowy. Zamiast używać jednolitego koloru. Powodem jest to, że nie możesz mieć dwóch jednolitych kolorów na jednym tle.
• Następnie do każdego zastosowano inną właściwość background-clip.
• w ten sposób jeden kolor rozszerza się na pole treści, a drugi na obramowanie, odsłaniając wypełnienie.

Sprytnie, jeśli tak sobie powiem.

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

Użyj właściwości background-clipi box-shadow.

1) Zestaw background-clip: content-box- ogranicza tło tylko do samej treści (zamiast zakrywać wypełnienie i obramowanie)

2) Dodaj wewnętrzną box-shadowz promieniem rozszerzania ustawionym na taką samą wartość jak wypełnienie.

Powiedzmy, że wypełnienie wynosi 10 pikseli - zestaw box-shadow: inset 0 0 0 10px lightGreen- co spowoduje, że tylko obszar wypełnienia będzie jasnozielony.

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>

Aby zapoznać się z dokładnym samouczkiem obejmującym tę technikę, zobacz ten wspaniały post dotyczący sztuczek CSS

Możesz użyć gradientów tła dla tego efektu. Na przykład po prostu dodaj następujące wiersze (to tylko tyle kodu, ponieważ musisz używać przedrostków dostawcy):

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

Nie ma potrzeby stosowania zbędnych znaczników.

Jeśli chcesz mieć tylko podwójne obramowanie, możesz użyć konturu i obramowania zamiast obramowania i dopełnienia.

Chociaż można by również użyć pseudoelementów, aby osiągnąć pożądany efekt, odradzałbym tego. Pseudoelementy to bardzo potężne narzędzie, które zapewnia CSS, jeśli "marnujesz" je na takie rzeczy, prawdopodobnie będziesz tęsknić za nimi gdzie indziej.

Używam pseudoelementów tylko wtedy, gdy nie ma innego wyjścia. Nie dlatego, że są złe, wręcz przeciwnie, ponieważ nie chcę zmarnować mojego Jokera.

odpowiedzi zawierały wszystkie możliwe rozwiązania

Mam jeszcze jeden z BOX-SHADOW

tutaj jest JSFIDDLE

i kod

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

obsługuje również w IE9, więc jest lepsze niż rozwiązanie gradientowe, dodaj odpowiednie przedrostki, aby uzyskać więcej wsparcia

IE8 go nie obsługuje, a szkoda!

Nie możesz ustawić koloru wypełnienia.

Będziesz musiał utworzyć element opakowania z żądanym kolorem tła. Dodaj obramowanie do tego elementu i ustaw jego dopełnienie.

Spójrz tutaj na przykład: http://jsbin.com/abanek/1/edit

To byłoby właściwe rozwiązanie CSS, które działa również dla IE8 / 9 (IE8 z oczywiście 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;
}

Nie ma dokładnej funkcjonalności, aby to zrobić.

Bez zawijania innego elementu w środku, możesz zastąpić obramowanie cieniem pola i wypełnienie obramowaniem. Ale pamiętaj, że cień boxu nie zwiększa wymiarów elementu.

jsfiddle działa bardzo wolno, w przeciwnym razie dodałbym przykład.

Po prostu zawijam nagłówek innym divem i bawię się obramowaniami.

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

Możesz zrobić element div na wypełnieniu w następujący sposób:

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

szerokość, długość, kolor tła, marginesy i indeks z mogą się oczywiście różnić, ale aby pokryć wypełnienie, indeks z musi być większy niż 0, aby znajdował się nad wypełnieniem. Możesz majstrować przy pozycjonowaniu i tym samym zmieniać jego orientację. Mam nadzieję, że to pomoże!

PS divy to html, a #paddingOne i #paddingTwo to css (na wypadek, gdyby ktoś tego nie zrozumiał :)