대답은 아니오라고 생각하지만 CSS로 배경 이미지를 배치하여 오른쪽에서 고정 된 양의 픽셀이되도록 할 수 있습니까?
background-positionx와 y의 값을 설정 하면 왼쪽과 위에서 각각 고정 된 픽셀 조정 만하는 것 같습니다.
답변
background-position: right 30px center;대부분의 브라우저에서 작동합니다. 전체 목록은 http://caniuse.com/#feat=css-background-offsets 를 참조하십시오 .
자세한 정보 : http://www.w3.org/TR/css3-background/#the-background-position
답변
border오른쪽에서 길이로 속성을 사용할 수 있습니다
background: url('/img.png') no-repeat right center;
border-right: 10px solid transparent;답변
한 가지 방법이 있지만 모든 브라우저에서 지원되는 것은 아닙니다 ( 여기에서 적용 범위 참조 ).
element {
background-position : calc(100% - 10px) 0;
}모든 최신 브라우저 에서 작동 하지만 IE9가 충돌 할 수 있습니다. = <IE8에 대한 적용 범위도 없습니다.
답변
내가 아는 한 CSS 사양 은 물론 CSS 표현식 외부에서 원하는 것을 정확하게 제공하지 않습니다. 표현식이나 Javascript를 사용하고 싶지 않다는 가정을 수행하면 세 가지 해킹 솔루션이 나타납니다.
- 배경 이미지가 컨테이너의 크기 (적어도 너비)와 일치하고 너비 만
background-repeat: repeat같거나 설정되어 있는지 확인하십시오repeat-x. 그러면x오른쪽에서 픽셀로 나타나는 것이 간단합니다.background-position: -5px 0px. - 백분율을 사용하면
background-position여기에 설명 된 것보다 잘 보이는 특수한 동작이 나타납니다. 기회를주세요. 본질적으로background-position: 90% 50%배경 이미지의 오른쪽 가장자리가 컨테이너의 오른쪽 가장자리에서 10 % 떨어져 있습니다. - 이미지가 포함 된 div를 만듭니다. 포함 요소의 위치를
position: relative아직 설정하지 않은 경우 명시 적으로 설정하십시오 . 이미지 컨테이너를로 설정position: absolute; right: 10px; top: 10px;하십시오. 이미지 div 컨테이너를 포함하는 요소에 넣습니다.
답변
이 시도:
#myelement {
background-position: 100% 50%;
margin-right: 5px;
}위의 코드는 전체 요소 (배경 이미지 만 아님)를 오른쪽에서 5px 이동시킵니다. 귀하의 경우에는 괜찮을 수도 있습니다.
답변
CSS3에서 할 수 있습니다 :
background-position: right 20px bottom 20px;Firefox, Chrome, IE9 +에서 작동합니다
출처 : MDN
답변
오른쪽 여백으로 사용하기 위해 오른쪽에 투명한 픽셀이있는 이미지 해결 방법.
동일한 이미지 해결 방법은 이미지 오른쪽에 투명 부분이있는 PNG 또는 GIF 이미지 (투명도를 지원하는 이미지 파일 형식)를 만드는 것입니다. 예 : 5px, 10px 등)
고정 너비와 너비 (%)에서 일관되게 잘 작동합니다. 실제로 헤더 오른쪽에 플러스 / 마이너스 또는 위 / 아래 화살표 이미지가있는 아코디언 헤더에 적합한 솔루션입니다!
단점 : 불행히도 컨테이너의 배경 부분과 CSS 배경 이미지의 배경색이 그라디언트 / 비 네트가없는 동일한 평평한 색상, 주로 흰색 / 검은 색 등이 아니면 JPG를 사용할 수 없습니다.
