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

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

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

예를 들어 왼쪽에서 특정 픽셀 수(예: 10)를 배치하려면 다음과 같이 합니다.

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

저는 이 CSS3 기능이 도움이 된다는 것을 알았습니다.

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

제가 알기로는 이것은 IE8에서 지원되지 않습니다.최신 크롬/파이어폭스에서는 잘 작동합니다.

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

사용된 출처: 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;

여기서 제안하는 것처럼, 이것은 완벽하게 작동하는 교차 브라우저 솔루션입니다.

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(브라우저 지원)를 제외한 대부분의 최신 브라우저에서 작동합니다.해당 페이지에 >= IE9이 지원되는 것으로 나열되어 있지만, 제 테스트는 그것과 일치하지 않았습니다.

calc() css3 속성을 이렇게 사용할 수 있습니다;

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

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

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

좋아요, 당신이 무엇을 요구하는지 이해한다면 이렇게 할 것입니다.

은 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 사양은 현재 파이어폭스 14에서 지원되지만 크롬 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과 사이있수될것이고이업는진▁with▁class▁the것고가 있는 수업이 될 것입니다..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를 사용하여 요소를 추가합니다.스판을 추가하는 것만으로 동일한 작업을 수행할 수 있습니다.<i>a-backet 내부의 입니다.하지만 저는 이것이 버튼에 아이콘을 추가하는 더 깨끗한 방법이라고 생각하며 크로스 브라우저를 지원합니다.

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

중앙 오른쪽을 위치로 사용한 다음 투명 테두리를 추가하여 상쇄하시겠습니까?

고정 너비 요소가 있고 배경 이미지의 너비를 알고 있는 경우, 배경 위치를 단순히 요소의 너비 - 이미지의 너비 - 오른쪽에 원하는 간격으로 설정할 수 있습니다.

예를 들어, 100µs 폭의 요소와 300µs 폭의 이미지를 사용하여 오른쪽에서 10µs의 간격을 얻으려면 100-300-10=-210µs로 설정합니다.

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

그리고 당신은 당신의 요소의 왼쪽에 있는 이미지의 가장 오른쪽에 있는 80픽셀과 오른쪽에 있는 20픽셀의 간격을 볼 수 있습니다.

바보같이 들릴 수도 있지만 가끔은 시간을 절약해주기도 합니다...저는 이미지 아래 텍스트가 있는 내비게이션 링크에 수직으로 그 정도 사용합니다(아래)

하지만 그것이 당신의 경우에 적용되는지는 확실하지 않습니다.

제 문제는 태블릿/모바일 등의 경우 창 크기가 조정될 때 오른쪽 테두리에서 동일한 거리를 유지하기 위해 배경 이미지가 필요하다는 것입니다. 제 수정 사항은 다음과 같은 비율을 사용하는 것입니다.

background-position: 98% 6px;

그리고 제자리에 붙습니다.

예! 배경 이미지를 왼쪽 대신 브라우저의 오른쪽에서 0°만큼 배치하려면 - i는 다음을 사용합니다.

background-position: 100% 0px;

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