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대신 요소에 를
• 이미지 자체에 투명한 픽셀을 추가하고 위치 지정 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 pseudo-elements를 사용할 수 있습니까?

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

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

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

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

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

예를 들어 : 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;