Puis-je ajouter une couleur d'arrière-plan uniquement pour le rembourrage ?

Question

J'ai une boîte d'en-tête avec une bordure, un remplissage et une couleur de fond pour cette boîte, Puis-je changer la couleur d'arrière-plan uniquement pour la région rembourrée après la bordure et ensuite la même couleur d'arrière-plan pour le reste de la largeur (c'est-à-dire le gris dans le code donné) ?

Juste une pincée du code où je veux la couleur d'arrière-plan rembourrée :

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

Answer 1

Je suis désolé que cette solution soit la vraie solution, celle où il n'est pas nécessaire de définir le rembourrage.

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

Ce que j'ai fait...

• J'ai appliqué deux dégradés sur le fond avec une couleur de départ et une couleur d'arrivée. Au lieu d'utiliser une couleur unie. La raison étant que vous ne pouvez pas avoir deux couleurs unies pour un fond.
• Ensuite, j'ai appliqué à chacune d'entre elles une propriété différente de type "background-clip".
• Ainsi, une couleur s'étend au contenu de la boîte et l'autre à la bordure, révélant le rembourrage.

Intelligent si je me le dis.

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

<p>Padding IS COLORED</p>
<div>Mexican’t professor plum charlie chaplin? Facial accessory lorreto del mar Daniel plainview landed gentry circus strongman sam elliott zap rowsdower, lorreto del mar off-piste frightfully nice mustachio landed gentry Daniel plainview zap rowsdower toothbrush
  circus strongman boogie nights sam elliott Daniel plainview facial accessory, Daniel plainview man markings boogie nights mr frothy-top sam elliott worn with distinction mustachio zap rowsdower off-piste Daniel plainview toothbrush lorreto del mar frightfully
  nice wario facial accessory mr frothy-top landed gentry circus strongman prostate cancer? Rock n roll star gunslinger villain marquess of queensbury en time-warped cabbie off-piste graeme souness en time-warped cabbie, cunning like a fox gunslinger
  dodgy uncle clive villain karl marx marquess of queensbury en time-warped cabbie graeme souness rock n roll star off-piste en time-warped cabbie, rock n roll star lemmy dodgy uncle clive graeme souness professor plum en time-warped cabbie villain gunslinger
  en time-warped cabbie marquess of queensbury cunning like a fox devilish cad off-piste karl marx. John aldridge basil fawlty landed gentry louis xiii sam elliott brigadier, et sodales cum dick van dyke mouth coiffure louis xiii landed gentry basil fawlty
  john aldridge stiff upper lip brigadier crumb catcher sam elliott?</div>

Answer 2

Utilisez le background-clip y box-shadow propriétés.

1) Définir background-clip: content-box - cela limite l'arrière-plan au contenu lui-même (au lieu de couvrir à la fois le padding et la bordure).

2) Ajouter un intérieur box-shadow avec le rayon d'étalement fixé à la même valeur que le rembourrage.

Supposons que le rembourrage soit de 10px. box-shadow: inset 0 0 0 10px lightGreen - ce qui rendra uniquement la zone de remplissage vert clair.

Démonstration du Codepen

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="http://stackoverflow.com/about/">About</a>
    </li>
    <li><a href="http://stackoverflow.com/blog/">Blog</a>
    </li>
  </ul>
</nav>

Pour un tutoriel complet couvrant cette technique, voir cet excellent article sur les astuces css

Answer 3

Une autre option avec du pur CSS serait quelque chose comme ceci :

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

<nav>Some text or anything</nav>

Démo aquí

Answer 4

Vous pouvez utiliser des dégradés d'arrière-plan pour cet effet. Pour votre exemple, il suffit d'ajouter les lignes suivantes (cela fait beaucoup de code car vous devez utiliser les préfixes des fournisseurs) :

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

Pas besoin de balises inutiles.

Si vous souhaitez simplement avoir une double bordure, vous pouvez utiliser outline et border au lieu de border et padding.

Bien que vous puissiez également utiliser des pseudo-éléments pour obtenir l'effet désiré, je vous le déconseille. Les pseudo-éléments sont un outil très puissant fourni par CSS, si vous les "gaspillez" pour des trucs comme ça, vous allez probablement les manquer ailleurs.

Je n'utilise les pseudo-éléments que s'il n'y a pas d'autre moyen. Pas parce qu'ils sont mauvais, bien au contraire, car je ne veux pas gaspiller mon Joker.

Answer 5

Vous ne pouvez pas définir la couleur du rembourrage.

Vous devrez créer un élément d'habillage avec la couleur de fond souhaitée. Ajoutez une bordure à cet élément et définissez son remplissage.

Regardez ici pour un exemple : http://jsbin.com/abanek/1/edit