중앙에서 x 픽셀만큼 오프셋 된 HTML 배경 이미지
웹 페이지의 배경으로 이미지를 배치하고 싶지만 중앙을 기준으로 픽셀 수만큼 오프셋을 적용하고 싶습니다.
어떻게 할 수 있습니까?
내가 원하는:
background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;
하지만 25 % 대신 "center-50px"라인을 따라 뭔가를 원합니다. 이것에 대한 해결책이 있습니까?
나는 당신이 원하는 것을 달성하는 솔루션이 있다고 믿습니다.
중앙을 기준으로 픽셀 수만큼 오프셋 된 배경 이미지 (특히 페이지 배경)입니다.
이것은 HTML 및 CSS 만 사용하여 작동하며 자바 스크립트가 필요하지 않습니다.
최신 정보
이것은 지금 사용하여 쉽게 달성 할 수 background-position와 calcCSS의 단위로.
다음 CSS는 이전 솔루션과 동일한 결과를 얻습니다 (아래 "원래 솔루션"참조).
#background-container {
width: 100%;
background-image: url("background-image.png");
background-position: calc(50% - 50px) 50%;
background-repeat: no-repeat;
}
참고 : 기존 버전의 IE에 대한 지원이 필요한 경우이 방법을 사용하지 마십시오.
오리지널 솔루션
#background-container {
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
}
이것이하는 일은 전체 컨테이너를 지정된 양만큼 수평으로 이동하는 것입니다 (이 경우 왼쪽 100px). 배경 이미지는 컨테이너를 기준으로 중앙에 있기 때문에 컨테이너와 함께 왼쪽으로 이동합니다.
패딩은 이동의 결과로 컨테이너 오른쪽에 나타나는 100px의 빈 공간을 수정합니다. 패딩을 통해 배경 이미지가 표시됨). 브라우저는 기본 콘텐츠 상자 값 대신 테두리 상자 값을 사용하여 배경 크기 및 위치를 계산하기 때문에 배경 이미지는 패딩 거리의 절반 인 오른쪽 50px로 효과적으로 다시 이동합니다. (설명을 위해 ErikE에게 감사드립니다).
따라서 오프셋 / 패딩은 필요한 오프셋 거리의 두 배 여야합니다.
여기에 샘플 페이지를 준비했습니다. http://www.indieweb.co.nz/testing/background-offset-center.html
창의 크기를 조정 해보십시오. 보라색과 파란색 배경 이미지 (페이지 중앙을 표시하는 더 깊은 배경 이미지 위에 놓여 있음)는 페이지 중앙 왼쪽에서 정확히 50px (오프셋 / 패딩 거리의 절반)로 유지됩니다.
사용 background-position: center;은 background-position: 50% 50%;.
따라서 calcCSS에서 길이 값을 대체하는 간단한 수학을 사용할 수 있습니다 . 예를 들면 다음과 같습니다.
background-position: calc(50% - 50px) 50%;
배경 이미지를 중앙에 배치하지만 왼쪽으로 50 픽셀 이동합니다.
따라서 왼쪽으로 50 픽셀 이동하여 중앙에 배치하려고합니다. 절대 치수를 다루지 않는 한 투명한 공간의 형태로 이미지에 50 픽셀을 추가합니다.
명확한 CSS 답변이 없습니다. JavaScript를 사용하여 값을 계산하거나 까다로운 작업을 수행해야합니다. 유지 background-position:25% center하고 추가 position:relative;left:-50px하거나 margin-left:-50pxDOM 요소를 사용하는 방법에 따라 작동하지 않을 수 있습니다.
내가 찾은 유일한 방법은 다른 div 내부에 배경을 넣은 다음 자바 스크립트를 사용하여 위치를 변경하는 것입니다 ...
<style>
body {
width: 100%;
overflow: hidden;
}
#bg {
position: absolute;
background: url(images/background.jpg) center top;
}
</style>
<script>
function recenter(){
var $pos = $('#content').offset().left;
$('#bg').css('left',$pos-580);
}
recenter();
$(window).resize(function(){ recenter(); });
</script>
<body>
<div id="bg"></div>
<div id="content">
blah
</div>
</body>
이미지의 너비를 알고 있으면 다음을 사용할 수 있습니다.
background-position: (BgWidth - 50)px 0px;
그렇게 할 수는 없습니다. 즉, (BgWidth-50)을 계산 한 다음 거기에 숫자를 써야합니다.
너비를 모르는 경우 Javascript (jQuery 포함 또는 제외)를 사용하고 다음을 사용할 수 있습니다.
$(#ID).css('background-position', (BgWidth - 50)+'px 0px');
좋은 대답 루크,
한 가지 더, 블록 너비가 화면 해상도보다 크면 블록을 다른 컨테이너에 넣고 다음을 수행해야합니다.
#container{
position:relative;
overflow:hidden;
}
#shadowBox{
width: 100%;
left: -100px; /* this must be TWICE the required offset distance*/
padding-right: 100px; /* must be the same amount as above */
background-image: url("background-image.png");
background-position: center;
background-repeat: no-repeat;
position:absolute: /*this is needed*/
}
My answer gotta be too late but somehow I've found another solution.
padding-left: 100px; /* offset you need */
padding-right: 100%;
or
padding-right: 100px;
padding-left: 100%;
The examples have the same effect.
the units need to be the same, so when specifying pixels for the x-position, the y-position needs to be also in pixels.
example:
background-position: 25% 50%;
EDIT: I just re-read your query and the only way to do that is either knowing the absolute position (assuming the outer elements aren't dynamic/flexible), or in case you don't know the position, maybe use javascript to set its position.
ReferenceURL : https://stackoverflow.com/questions/5981842/html-background-image-offset-by-x-pixels-from-the-center
'programing' 카테고리의 다른 글
| VBScript에서 문자열에 따옴표 추가 (0) | 2021.01.18 |
|---|---|
| node.js-코드 보호? (0) | 2021.01.18 |
| NetBeans에서 마우스 호버에 대한 Javadoc 문서를 보는 방법은 무엇입니까? (0) | 2021.01.18 |
| 얼굴 감지에서 Haar Cascades 대 LBP Cascades (0) | 2021.01.18 |
| Django의 사용자 지정 관리자에서 DoesNotExist 예외 잡기 (0) | 2021.01.18 |