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

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

---

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

• 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 패딩 상자에 이미지를 첨부하여 원하는 위치에 배치 할 수 있습니다.

---

다른 사람이 배경 이미지 및 배경 크기 : 포함 또는 커버로 패딩을 추가해야하는 경우 다음을 사용하는 것이 좋습니다. 너비를 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의 빈 픽셀을 만듭니다. 이것은 포토샵, 불꽃 놀이, 김프, & c에서 간단합니다.

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

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

#hello img { padding: 10px; }

WR!

---

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

예를 들어 링크 항목 앞에 글 머리 기호가있는 탐색 메뉴가 있고 해당 링크가 활성 상태가되면 글 머리 기호 그래픽이 변경되는 시나리오가 있습니다. 또한 활성 링크에도 표시 할 배경색이 있었고이 배경색에는 링크 항목의 왼쪽과 오른쪽에 약 15px 패딩이 있습니다 (왼쪽에 링크의 글 머리 기호 아이콘도 포함됨).

padding-right는 링크 텍스트 오른쪽에서 배경색을 최대 15px 더 늘려야하는 목적을 충족합니다. 왼쪽 여백은 링크 텍스트와 글 머리 기호 사이의 공간에만 추가됩니다.

그래서 PSD 디자인 (예 : 82px)에서 배경색 개체의 너비를 가져 와서 (활성 상태를 표시하기 위해 생성 된 클래스에서) li 요소에 추가 한 다음 배경 위치 값을 20px로 설정했습니다. 그 결과 총알 아이콘이 왼쪽 가장자리에서 안쪽으로 이동했습니다. 그리고 배경 이미지로 사용되는 글 머리 기호 아이콘 앞에 패딩을 남겨두고 원하는 출력을 제공했습니다.

링크 항목 사이의 공간이나 글 머리 기호 아이콘과 링크 텍스트 사이의 간격에 사용할 수있는 패딩 / 여백 값을 적절히 조정해야 할 수 있습니다.

참조 URL : https://stackoverflow.com/questions/7961589/positioning-background-image-adding-padding