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

Vous pouvez faire un div sur le padding comme suit :

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

La largeur, la longueur, la couleur d'arrière-plan, les marges et l'indice z peuvent bien sûr varier, mais pour couvrir le rembourrage, l'indice z doit être supérieur à 0 afin que le texte se superpose au rembourrage. Vous pouvez jouer avec le positionnement et d'autres éléments pour modifier son orientation. J'espère que cela vous aidera !

P.S. les divs sont en html et les #paddingOne et #paddingTwo sont en css (au cas où quelqu'un ne l'aurait pas compris :)

Answer 2

Une autre astuce :

Empiler deux divs l'un sur l'autre, puis appliquer des background-clip pour chacun (en bas avec padding-box dessus avec content-box ) :

.rect {
  width: 100px;
  height: 50px;
  border: red solid 5px;
  padding: 10px;
  position: absolute;
}
.bottom {
  background: yellow padding-box;
}
.top {
  background: pink content-box;
}

<div>
  <div class="rect bottom"></div>
  <div class="rect top"></div>
</div>

Linke :

• La propriété du clip de fond
• Empiler les divs

Answer 3

Si vous ne voulez pas affecter l'arrière-plan du contenu et que vous avez un remplissage différent pour chaque direction, utilisez ce qui suit :

div {
  width: 440px;
  padding: 10px 20px 30px 40px;
  box-shadow: inset 0 10px 0 0 lightGreen, inset -20px 0 0 0 lightGreen, inset 0 -30px 0 0 lightGreen, inset 40px 0 0 0 lightGreen;
}

<div>The light green background color shows the padding of the element</div>