패딩에만 배경색을 추가 할 수 있습니까?

테두리 및 패딩 및 해당 상자의 배경색을 포함하는 헤더 상자가 있습니다. 테두리 뒤의 패딩 된 영역에 대해서만 배경색을 변경 한 다음 나머지 너비에 대해 동일한 배경색을 변경할 수 있습니까 (예 : 주어진 코드에서 회색) ?

패딩 된 배경색을 원하는 코드의 꼬집음 :

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

순수한 CSS의 또 다른 옵션은 다음과 같습니다.

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

여기에서 데모

나는 이것이 실제로 패딩을 설정할 필요가없는 진정한 해결책이라는 점에 대해 유감입니다.

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

내가 뭘 한거지...

• 시작 및 끝 색상이 모두 하나 인 배경에 두 개의 그라디언트를 적용했습니다. 단색을 사용하는 대신. 한 배경에 두 가지 단색을 사용할 수 없기 때문입니다.
• 그런 다음 각각 다른 background-clip 속성을 적용했습니다.
• 따라서 한 색상을 콘텐츠 상자로 확장하고 다른 색상을 테두리로 확장하여 패딩을 드러냅니다.

내가 스스로에게 그렇게 말하면 영리하다.

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

background-clip및 box-shadow속성을 사용합니다 .

1) 설정 background-clip: content-box-패딩과 테두리를 모두 덮는 대신 배경을 콘텐츠 자체로만 제한합니다.

2) box-shadow패딩과 동일한 값으로 설정된 스프레드 반경으로 내부 를 추가하십시오 .

따라서 패딩이 10px-설정이라고 가정하면 box-shadow: inset 0 0 0 10px lightGreen패딩 영역 만 연한 녹색이됩니다.

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

이 기술을 다루는 철저한 튜토리얼은 이 훌륭한 css-tricks 게시물을 참조하십시오.

해당 효과에 배경 그라데이션을 사용할 수 있습니다. 예를 들어 다음 줄을 추가하십시오 (공급 업체 접두사를 사용해야하기 때문에 코드가 너무 많음).

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

불필요한 마크 업이 필요하지 않습니다.

이중 테두리를 원하면 테두리와 패딩 대신 테두리와 테두리를 사용할 수 있습니다.

의사 요소를 사용하여 원하는 효과를 얻을 수도 있지만 반대하는 것이 좋습니다. 유사 요소는 CSS가 제공하는 매우 강력한 도구입니다. 이와 같은 것에 "낭비"하면 아마도 다른 곳에서 놓칠 것입니다.

다른 방법이없는 경우에만 의사 요소를 사용합니다. 나쁘기 때문이 아니라 정반대입니다. 조커를 낭비하고 싶지 않기 때문입니다.

대답은 가능한 모든 해결책을 말했습니다

BOX-SHADOW로 하나 더 있습니다

여기는 JSFIDDLE입니다

및 코드

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

IE9에서도 지원하므로 그래디언트 솔루션보다 낫습니다. 더 많은 지원을 위해 적절한 접두사를 추가하십시오.

IE8은 그것을 지원하지 않습니다.

패딩 색상을 설정할 수 없습니다.

원하는 배경색으로 래퍼 요소를 만들어야합니다. 이 요소에 테두리를 추가하고 패딩을 설정합니다.

여기에서 예를보십시오 : http://jsbin.com/abanek/1/edit

이것은 IE8 / 9에서도 작동하는 적절한 CSS 솔루션이 될 것입니다 (IE8 with html5shiv ofcourse) : 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;
}

이를 수행하는 정확한 기능은 없습니다.

내부에 다른 요소를 감싸지 않고 테두리를 상자 그림자로 바꾸고 패딩을 테두리로 바꿀 수 있습니다. 그러나 상자 그림자는 요소의 크기에 추가되지 않습니다.

jsfiddle이 정말 느립니다. 그렇지 않으면 예제를 추가하겠습니다.

헤더를 다른 div로 감싸고 테두리로 재생합니다.

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

패딩에 대해 다음과 같이 div를 수행 할 수 있습니다.

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

너비, 길이, 배경색, 여백 및 Z- 색인은 물론 다를 수 있지만 패딩을 덮으려면 Z- 색인이 0보다 높아야 패딩 위에 놓이게됩니다. 위치 등을 조작하여 방향을 변경할 수 있습니다. 도움이 되었기를 바랍니다.

추신 : div는 html이고 #paddingOne 및 #paddingTwo는 CSS입니다 (누구도 얻지 못한 경우 :)