CSS를 사용하여 오른쪽에서 배경 이미지 오프셋

CSS를 사용하여 오른쪽에서 배경 이미지 오프셋

---

배경 이미지를 요소의 오른쪽에서 특정 픽셀 수만큼 배치하는 방법이 있습니까?

예를 들어, 왼쪽 에서 특정 수의 픽셀 (예 : 10)을 배치하려면 다음과 같이하십시오.

#myElement {
    background-position: 10px 0;
}

---

이 CSS3 기능이 유용하다는 것을 알았습니다.

/* to position the element 10px from the right */
background-position: right 10px top;

내가 아는 한 IE8에서는 지원되지 않습니다. 최신 Chrome / Firefox에서는 정상적으로 작동합니다.

지원되는 브라우저에 대한 자세한 내용은 사용할 수 있습니까를 참조하십시오 .

사용 된 출처 : http://tanalin.com/en/blog/2011/09/css3-background-position/

업데이트 :

이 기능은 이제 모바일 브라우저를 포함한 모든 주요 브라우저에서 지원됩니다.

---

!! CSS3 가이 기능을 제공 했기 때문에 오래된 답변

배경 이미지를 요소의 오른쪽에서 특정 픽셀 수만큼 배치하는 방법이 있습니까?

아니.

인기있는 해결책은 다음과 같습니다.

• margin-right대신 요소에 a 를 설정
• 이미지 자체에 투명한 픽셀을 추가하고 위치 지정 top right
• 또는 요소의 너비가 알려진 후 jQuery를 사용하여 위치를 계산합니다.

---

가장 쉬운 해결책은 백분율을 사용하는 것입니다. 이것은 픽셀 정밀도를 요구 한 이후 정확히 원하는 답이 아니지만 오른쪽 가장자리와 이미지 사이에 약간의 패딩이 필요한 경우 일반적으로 99 %의 위치를 ​​지정하면 충분합니다.

암호:

/* aligns image to the vertical center and horizontal right of its container with a small amount of padding between the right edge */
div.middleleft {
  background: url("/images/source.jpg") 99% center no-repeat;
}

---

오래된 답변 : 이제 주요 브라우저에서 구현됩니다.이 질문에 대한 다른 답변을 참조하십시오.

CSS3은 background-position다른 원점에서 작동하도록 사양을 수정했습니다 . 불행히도 아직 주요 브라우저에서 구현되었다는 증거를 찾을 수 없습니다.

http://www.w3.org/TR/css3-background/#the-background-position 예 12를 참조하십시오.

background-position: right 3em bottom 10px;

---

here 제안 된 것처럼 이것은 완벽하게 작동하는 예쁜 크로스 브라우저 솔루션입니다.

background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;

질문을 해결하는 것으로 표시된 답변에 제안 된 오프셋을 지정하는 CSS3 기능이 브라우저에서 아직 잘 지원되지 않기 때문에이 기능을 사용했습니다. 예 :

---

가장 적절한 대답은 배경-위치에 대한 새로운 4-값 구문이지만, 모든 때까지 브라우저를 지원 당신의 가장 좋은 방법은 다음과 같은 순서로 이전 응답의 조합입니다 :

background: url(image.png) no-repeat 97% center; /* default, Android, Sf < 6 */
background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */
background-position: right 10px center; /* Cr 25+, FF 13+, IE 9+, Op 10.5+ */

---

간단하지만 더러운 트릭은 배경으로 사용중인 이미지에 원하는 오프셋을 추가하는 것입니다. 유지 관리 할 수 ​​없지만 작업이 완료됩니다.

---

이것은 IE (브라우저 지원)를 제외한 대부분의 최신 브라우저 에서 작동합니다 . 해당 페이지에 지원되는 것으로 IE => 9가 나열되어 있지만 테스트에 동의하지 않았습니다.

다음과 같이 calc () css3 속성을 사용할 수 있습니다.

.class_name {
    background-position: calc(100% - 10px) 50%;
}

나에게 이것은 오른쪽 마진을 얻는 가장 깨끗하고 가장 논리적 인 방법입니다. 또한 border-right: 10px solid transparent;IE 사용의 대체를 사용 합니다.

---

Ok 당신의 요구가 무엇인지 이해한다면;

DIV 컨테이너를 호출 #main-container했으며 .my-element그 안에 있습니다. 이것을 사용하여 시작하십시오.

#main-container { 
  position:relative;
}
/*To make the element absolute - floats above all else within the parent container do this.*/
.my-element {
  position:absolute;
  top:0;
  right:10px;
}

/*To make the element apart of elements, something tangible that affects the position of other elements on the same level within the parent then do this;*/
.my-element {
  float:right;
  margin-right:10px;
}

그건 그렇고, 페이지 내에서 하위 레벨 요소를 참조하는 경우 클래스를 사용하는 것이 좋습니다 (따라서 위의 이름이 변경되었다고 가정합니다.

---

백그라운드 위치에 다른 출처를 허용하는 CSS3 사양은 이제 Firefox 14에서 지원되지만 여전히 Chrome 21에서는 지원되지 않습니다 (IE9는 부분적으로 지원하지만 직접 테스트하지는 않았습니다)

@MattyF가 언급 한 Chrome 문제 외에도 여기에 더 간결한 요약이 있습니다. http://code.google.com/p/chromium/issues/detail?id=95085

---

비례 요소가있는 경우 다음을 사용할 수 있습니다.

.valid {
    background-position: 98% center;
}

.half .valid {
    background-position: 96% center;
}

이 예 .valid에서 그림이있는 클래스가 .half되고 표준 크기의 절반이있는 행이됩니다.

더럽지 만 매력으로 작용하며 합리적인 관리가 가능합니다.

---

예를 들어 버튼에 화살표 / 기타 아이콘을 추가하는 데 이것을 사용하려면 CSS 유사 요소를 사용할 수 있습니까?

실제로 전체 버튼의 배경 이미지 인 경우 간격을 이미지에 통합하는 경향이 있습니다.

background-position: right 0;

그러나 버튼에 디자인 된 화살표를 추가 해야하는 경우이 HTML을 사용하는 경향이 있습니다.

<a href="[url]" class="read-more">Read more</a>

CSS로 다음을 수행하는 경향이 있습니다.

.read-more{
    position: relative;
    padding: 6px 15px 6px 35px;//to create space on the right
    font-size: 13px;
    font-family: Arial;
}

.read-more:after{
    content: '';
    display: block;
    width: 10px;
    height: 15px;
    background-image: url('../images/btn-white-arrow-right.png');
    position: absolute;
    right: 12px;
    top: 10px;
}

: after 선택기를 사용하여 CSS를 사용하여이 작은 아이콘을 포함하는 요소를 추가합니다. a- <i>요소 안에 범위 또는 요소를 추가하여 동일한 작업을 수행 할 수 있습니다. 그러나 이것이 버튼에 아이콘을 추가하는 더 깔끔한 방법이라고 생각하며 브라우저 간 지원됩니다.

여기에서 바이올린을 확인할 수 있습니다 : http://codepen.io/anon/pen/PNzYzZ

---

중심을 위치로 사용하고 투명한 테두리를 추가하여 오프셋합니까?

---

너비 요소가 고정되어 있고 배경 이미지의 너비를 알고있는 경우 배경 위치를 요소 너비-이미지 너비-오른쪽에서 원하는 간격으로 설정하면됩니다.

예를 들어 : 100px 너비의 요소와 300px 너비의 이미지로 오른쪽에 10px의 간격을 얻으려면 100-300-10 = -210px로 설정하십시오.

#myElement {
  background:url(my_image.jpg) no-repeat -210px top;
  width:100px;
}

그리고 요소의 왼쪽에 이미지의 가장 오른쪽 80 픽셀, 오른쪽에 20 픽셀의 간격이 있습니다.

나는 어리석게 들릴 수 있지만 때로는 시간을 절약한다는 것을 알고 있습니다 ... 이미지 아래의 텍스트가있는 탐색 링크에는 세로 방향 (아래쪽 간격)으로 많이 사용합니다.

그래도 귀하의 경우에 적용되는지 확실하지 않습니다.

---

내 문제는 창 크기를 조정할 때 (예 : 태블릿 / 모바일 등) 오른쪽 테두리에서 동일한 거리를 유지하기 위해 배경 이미지가 필요했습니다. 내 수정은 다음과 같이 percenatge를 사용하는 것입니다.

background-position: 98% 6px;

제자리에 붙어 있습니다.

---

예! 배경 이미지를 왼쪽 대신에 브라우저의 오른쪽에서 0px처럼 배치하는 것이 좋습니다.

background-position: 100% 0px;

---

background-position: calc(100% - 8px);

참고 URL : https://stackoverflow.com/questions/5142405/offset-a-background-image-from-the-right-using-css