배경 이미지를 요소의 오른쪽에서 특정 픽셀 수만큼 배치하는 방법이 있습니까?
예를 들어, 왼쪽 에서 특정 수의 픽셀 (예 : 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+ */답변
간단하지만 더러운 트릭은 배경으로 사용중인 이미지에 원하는 오프셋을 추가하는 것입니다. 유지 관리 할 수 없지만 작업이 완료됩니다.
