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

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

답은 아니라고 생각합니다만, CSS로 배경 이미지를 오른쪽에서 고정된 픽셀 수만큼 배치할 수 있습니까?

가 면하정으로 하면,background-positionx와 y의 값은 각각 왼쪽과 위쪽에서 고정 픽셀 조정만 제공하는 것 같습니다.

background-position: right 30px center;

대부분의 브라우저에서 작동합니다.전체 목록은 http://caniuse.com/ #http=http-background-http를 참조하십시오.

자세한 정보: http://www.w3.org/TR/css3-background/ #배경 위치

" 을속사할수있다니습"를 할 수 .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

오른쪽에 투명 픽셀이 있는 이미지 해결 방법은 오른쪽 여백 역할을 합니다.

동일한 문제에 대한 이미지 해결 방법은 이미지 오른쪽에 오른쪽 여백을 지정하려는 픽셀 수(예: 5px, 10px 등)와 정확히 동일한 투명 부분이 있는 PNG 또는 GIF 이미지(투명도를 지원하는 이미지 파일 형식)를 만드는 것입니다.

이 기능은 고정 너비뿐만 아니라 백분율의 너비에서도 일관되게 잘 작동합니다.헤더 오른쪽에 플러스/마이너스 또는 위/아래 화살표 이미지가 있는 아코디언 헤더에 대한 실질적으로 좋은 솔루션입니다!

단점:안타깝게도 컨테이너의 배경 부분과 CSS 배경 이미지의 배경색이 동일한 평면 색상(그라데이션/비네트 없음), 대부분 흰색/검은색 등이 아니면 JPG를 사용할 수 없습니다.

현대 브라우저 시대에 이 주제를 우연히 발견하게 되면 유사 클래스:fter를 사용하여 배경을 사용하여 실질적인 모든 작업을 수행할 수 있습니다.

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

이 css는 오른쪽에 20µs 공간이 있는 ".css" 요소의 오른쪽 하단 모서리에 배경을 배치합니다.

예를 들어 이 바이올린을 참조하십시오. 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+ */

x축만 지정하려는 경우 다음을 수행할 수 있습니다.

background-position-x: right 100px;

픽셀 패딩을 이미지에 넣기만 하면 됩니다. 포토샵에서 이미지의 캔버스 크기에 10px 또는 기타를 추가하고 CSS로 바로 정렬합니다.

테이블 헤더의 오른쪽에 항상 드롭다운 화살표를 표시하기 위해 유사한 작업을 수행하려다가 Chrome 및 Firefox에서 작동하는 것처럼 보이는 것을 발견했지만 Safari에서 잘못된 속성이라고 알려주었습니다.

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;

여기 그것이 어떻게 보이고 작동하는지에 대한 코드펜이 있습니다.코드펜은 SCSS로 작성되었습니다 - http://cdpn.io/xqGbk

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

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

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

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

background-position: right 10px top 10px;

RTL 워드프레스 테마에 사용합니다.예를 참조하십시오. 임시 웹 사이트 또는 실제 웹 사이트가 곧 시작됩니다.오른쪽 큰 DIV에 있는 아이콘을 보세요.

제가 언급하지 않은 또 다른 해결책은 의사 요소를 사용하는 것이며 이 해결책은 CSS 2.1 호환 브라우저(802 IE8,802 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를 오른쪽 경계에서 5px로 고정해야 합니다. -5px;...여기에서 직접 테스트해 보십시오. http://jsfiddle.net/yHucT/

용기 높이가 고정된 경우:정확하게 맞을 때까지 백분율(배경 위치)을 조정합니다.

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

선택 상자의 오른쪽에 있는 5px와 같은 선택 상자의 배경을 찾으려다가 이 문제를 발견했습니다.제 경우 배경은 기본 드롭다운 아이콘을 대체하는 아래쪽 화살표입니다.저의 경우, 패딩은 항상 배경에 대해 동일하게 유지되므로(오른쪽에서 5-10픽셀) 실제 배경 이미지로 가져오는 것이 쉽습니다(오른쪽에서 5-10픽셀의 치수를 넓힙니다).

이것이 도움이 되길 바랍니다!

왼쪽부터 비율을 조정하는 것은 제 취향에 조금 깨지기 쉽습니다.이 필요할 입니다.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%;

모두를 위한 더 나은

background: url('../images/bg-menu-dropdown-top.png') left 20px top no-repeat !important;

음수 값에 대한 솔루션입니다.패딩 오른쪽을 조정하여 이미지를 이동합니다.

<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;

언급URL : https://stackoverflow.com/questions/3197250/position-a-css-background-image-x-pixels-from-the-right