CSS 배경 이미지를 오른쪽에서 x 픽셀 위치에 배치 하시겠습니까?

대답은 아니오라고 생각하지만 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를 사용할 수 없습니다.

요즘 최신 브라우저 에서이 주제에 걸려 넘어지면 의사 클래스 : after를 사용하여 배경으로 실질적으로 무엇이든 할 수 있습니다.

.container:after{
    content:"";
    position:absolute;
    right:20px;
    background:url(http://lorempixel.com/400/200) no-repeat right bottom;
}

이 CSS는 오른쪽에 20px의 공간이있는 ".container"요소의 오른쪽 아래 모서리에 배경을 배치합니다.

예를 들어이 바이올린을 참조하십시오 http://jsfiddle.net/h6K9z/226/

가장 적절한 대답은 배경-위치에 대한 새로운 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+ */

픽셀 패딩을 이미지에 넣으십시오-photohop에서 이미지의 캔버스 크기에 10px 이상을 추가하고 CSS에서 바로 정렬하십시오.

비슷한 작업을 수행하여 항상 테이블 헤더의 오른쪽에 드롭 다운 화살표를 가져 와서 Chrome과 Firefox에서 작동하는 것처럼 보였지만 사파리는 잘못된 속성이라고 말했습니다.

background: url(http://goo.gl/P93P5Q) center right 10px no-repeat;

인스펙터에서 약간 혼란스러워서 IE8 +, Chrome, Firefox 및 Safari에서 작동하는이 브라우저 간 솔루션과 반응 형 디자인을 생각해 냈습니다.

background: url(http://goo.gl/P93P5Q) no-repeat 95% center;

다음은 모양과 작동 방식에 대한 코드입니다. Codepen은 SCSS로 작성 - http://cdpn.io/xqGbk

x 축만 지정하려면 다음을 수행하십시오.

background-position-x: right 100px;

내가 언급하지 않은 또 다른 해결책은 의사 요소를 사용하는 것이며이 솔루션은 CSS 2.1 호환 브라우저 (≥ IE8, ≥ Safari 2 등)에서 작동하며 응답 성이 있어야한다고 생각합니다.

element::after
{
content:' ';
position:relative;
display:block;
width:100%;
height:100%;
bottom:0;
right:-5px; /* 10 px from the right of element inner-margin (padding) see example */
background:url() right center no-repeat;
}

예 : 요소 예. 사각형 크기 100px (테두리를 고려하지 않은)에는 10px 패딩이 있으며 오른쪽 패딩 안에 배경 이미지가 표시되어야합니다. 이는 의사 요소가 80px 크기의 사각형이라는 것을 의미합니다. 우리는 그것을 오른쪽으로 요소의 오른쪽 테두리에 붙이고 싶습니다 .-10px; . 오른쪽 테두리에서 5px 떨어진 배경 이미지를 원한다면 의사 요소를 요소의 오른쪽 테두리에서 5px 떨어진 곳에 right : -5px; ... 여기서 스스로 테스트하십시오 : http://jsfiddle.net/yHucT/

컨테이너의 높이가 고정 된 경우 : 올바르게 맞을 때까지 백분율 (백그라운드 위치).

컨테이너의 높이가 동적 인 경우 : 경우 배경과 컨테이너 사이에 패딩 (예 : 사용자 정의 스타일링 입력, 선택)을 원하는 경우 이미지에 패딩을 추가하고 배경 위치를 오른쪽 또는 아래쪽으로 설정하십시오.

선택 상자의 배경을 선택 오른쪽에서 5px로 맞추려고하는 동안이 질문에 걸려 들었습니다. 필자의 경우 배경은 기본 드롭 다운 아이콘을 대체하는 화살표 아래쪽입니다. 필자의 경우 패딩은 배경과 항상 동일하게 유지되므로 (오른쪽에서 5-10 픽셀) 실제 배경 이미지를 쉽게 수정할 수 있습니다 (오른쪽에서 크기가 5-10 픽셀 넓어짐).

도움이 되었기를 바랍니다!

편집기에서 배경 이미지를 오른쪽에서 x 픽셀로 배치 할 수 있습니다.

background: url(images_url) no-repeat right top;

배경 이미지는 오른쪽 상단에 위치하지만 오른쪽에서 x 픽셀로 나타납니다.

왼쪽에서 비율을 조정하면 취향에 따라 조금 깨지기 쉽습니다. 이와 같은 것이 필요할 때 컨테이너 스타일을 래퍼 요소에 추가하고 내부 요소에 배경을 적용하는 경향이 있습니다.background-position: right bottom

<style>
    .wrapper {
        background-color: #333;
        border: solid 3px #222;
        padding: 20px;
    }
    .bg-img {
        background-image: url(path/to/img.png);
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    .content-breakout {
        margin: -20px
    }
</style>

<div class="wrapper">
    <div class="bg-img">
        <div class="content-breakout"></div>
    </div>
</div>

이 .content-breakout클래스는 선택 사항이며 필요한 경우 콘텐츠를 패딩에 넣을 수 있습니다 (음수 여백 값은 래퍼 패딩의 해당 값과 일치해야 함). 조금 장황하지만 너비와 높이에 비해 이미지의 상대적 위치에 신경 쓰지 않아도 안정적으로 작동합니다.

이 질문이 제기 된 이후로 오래 지속되었지만 방금이 문제가 발생하여 다음과 같이하여 문제를 해결했습니다.

background-position:95% 50%;

음수에 대한 솔루션. 안쪽 여백을 조정하여 이미지를 이동하십시오.

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

이것은 Chrome 27에서 작동합니다. 유효한지 여부 또는 다른 브라우저가 그 기능을 수행하는지 알 수 없습니다. 나는 이것에 대해 놀랐다.

background: url(../img/icon_file_upload.png) top+3px right+10px no-repeat;

모든 실제 브라우저 및 IE9 +에서 작동합니다.

background-position: right 10px top 10px;

RTL WordPress 테마에 사용합니다. 예 : 임시 웹 사이트 또는 실제 웹 사이트 가 곧 출시 될 예정입니다. 큰 DIV 오른쪽 모서리에있는 아이콘을보십시오.

모든 배경에서 더 좋습니다 : url ( '../ images / bg-menu-dropdown-top.png') 왼쪽 20px top no-repeat! important;