배경 이미지 위치 지정, 패딩 추가

배경 이미지 위치 지정, 패딩 추가

---

이 질문에 이미 답변이 있습니다.

• CSS : 배경 이미지 및 패딩 8 답변

div에 배경을 추가하고 오른쪽 중앙에 배치하고 싶지만 이미지에 약간의 패딩이 있습니다. div에는 텍스트에 패딩이 있으므로 배경을 약간 들여 쓰기하고 싶습니다. 아마도 예를 들어 가장 의미가 있습니다.

http://jsbin.com/umuvud/edit#javascript,html,live

감사!

---

업데이트 된 답변 :

이것이이 질문에 대한 정답이 아니라는 의견을 여러 번 받았으며 동의합니다. 이 답변이 작성되었을 때 IE 9는 여전히 새롭고 (약 8 개월) 저를 포함한 많은 개발자가 <= IE 9에 대한 솔루션이 필요했습니다. IE 9는 IE 가background-origin . 그러나 6 년 반이 넘었으므로 실제 테두리를 사용하는 것보다 강력하게 권장하는 업데이트 된 솔루션이 있습니다. <IE 9 지원이 필요한 경우. 내 원래 답변은 데모 스 니펫 아래에서 찾을 수 있습니다. 불투명 테두리를 사용하여 배경 이미지의 패딩을 시뮬레이션합니다.

#hello {
  padding-right: 10px;
  background-color:green;
  background: url("https://placehold.it/15/5C5/FFF") no-repeat scroll right center #e8e8e8;
  background-origin: content-box;
}

<p id="hello">I want the background icon to have padding to it too!I want the background icon twant the background icon to have padding to it too!I want the background icon to have padding to it too!I want the background icon to have padding to it too!</p>

원래 답변 :

배경과 같은 색상의 10px 테두리로 가짜로 만들 수 있습니다.

http://jsbin.com/eparad/edit#javascript,html,live

#hello {
   border: 10px solid #e8e8e8;
   background-color: green;
   background: url("http://www.costascuisine.com/images/buttons/collapseIcon.gif")
               no-repeat scroll right center #e8e8e8;
}

---

이것은 실제로 매우 쉽게 수행됩니다. 거의 완료되었습니다 background-position: right center;.. 이 경우에 실제로 필요한 것은 매우 유사합니다. 이것을 백분율로 변환 해 봅시다. center= 라는 것을 알고 50%있으므로 충분히 쉽습니다. 이제 원하는 패딩을 얻으려면 배경을 다음과 같이 배치해야합니다 background-position: 99% 50%..

두 번째로 더 효과적인 방법은 동일한 background-position아이디어 를 사용하고 background-position: 400px (width of parent) 50%;. 물론이 방법은 정적 너비가 필요하지만 매번 같은 것을 제공합니다.

방법 1 (99 % 50 %)
방법 2 (400px 50 %)

---

실제로 이것에 대한 기본 솔루션이 있습니다 . 배경 위치에 4 개의 값 을 사용합니다.

.CssClass {background-position: right 10px top 20px;}

이것은 오른쪽에서 10px, 위에서 20px를 의미합니다. 세 개의 값 을 사용할 수도 있으며 네 번째 값은 0으로 계산됩니다.

---

background-origin : padding-box를 사용할 수 있습니다. 그런 다음 원하는 곳에 패딩을 추가합니다. 예를 들면 다음과 같습니다. #logo {background-image: url(your/image.jpg); background-origin:padding-box; padding-left: 15%;}이렇게하면 이미지를 포함하는 div 패딩 상자에 이미지를 첨부하여 원하는 위치에 배치 할 수 있습니다.

---

다른 사람이 background-image 및 background-size : contain 또는 cover 를 사용하여 패딩을 추가해야하는 경우 다음을 사용하여 좋은 방법입니다. 테두리 너비를 10 % 또는 2vw 또는 원하는대로 바꿀 수 있습니다.

.bg-image {
    background: url("/image/logo.png") no-repeat center #ffffff / contain;
    border: inset 10px transparent;
    box-sizing: border-box;
}

이것은 너비를 정의 할 필요가 없음을 의미합니다.

---

우선하는 henpeck의 비트 수, 최선은 사용하지 않는 것이 바로<background> 태그를. 오히려 적절하고 더 구체적인 <background-image>태그를 사용하십시오.

내가 그런 일을 수행하는 알고 있어요 유일한 방법은 패딩 구축하는 것입니다 에 매트를 확장하여 이미지를. 빈 픽셀이 제거되지 않았으므로 바로 패딩이 있습니다. 따라서 10px 테두리가 필요한 경우 이미지 주위에 10px의 빈 픽셀을 만듭니다. 이것은 Photoshop, Fireworks, GIMP, & c에서 간단합니다.

죽어가는 GIF 대신 PNG8 형식을 사용해 보는 것도 좋습니다 . 훨씬 더 좋습니다.

사용 방법에 대해 조금 더 알고 있다면 문제에 대한 대체 솔루션이있을 수 있습니다. :) 아코디언 버튼을 추가하려는 것 같습니다. 이것은 JavaScript / PHP로 대상을 지정할 수 있기 때문에 HTML에 배치하는 것이 가장 좋습니다. 백그라운드에 있으면 할 수없는 일입니다. 이 경우 다음을 사용하여 현재 CSS에있는 이미지의 스타일을 지정할 수 있습니다.

#hello img { padding: 10px; }

WR!

---

배경 이미지 앞에 공간을 추가하려면 'background-image'객체를 사용하는 요소의 '너비'를 정의 할 수 있습니다. 그런 다음 'background-position'속성에 픽셀 값을 정의하여 왼쪽에서 공간을 만듭니다.

For example, I'd a scenario where I got a navigation menu which had a bullet before link item and the bullet graphic were changeable if corrosponding link turns into an active state. Further, the active link also had a background-color to show, and this background-color had approximate 15px padding both on left and right side of link item (so on left, it includes bullet icon of link too).

While padding-right fulfill the purpose to have background-color stretched upto 15px more on right of link text. The padding-left only added to space between link text and bullet.

So I took the width of background-color object from PSD design (for ex. 82px) and added that to li element (in a class created to show active state) and then I set background-position value to 20px. Which resulted in bullet icon shifted inside from the left edge. And its provided me desired output of having left padding before bullet icon used as background image.

Please note, you may need to adjust your padding / margin values accordingly, which may used either for space between link items or for spacing between bullet icon and link text.

ReferenceURL : https://stackoverflow.com/questions/7961589/positioning-background-image-adding-padding