배경 이미지 너비를 기준으로 요소 배치 방법

참고 : JS 액세스 권한이 없습니다. 이 작업은 CSS로 수행해야합니다.배경 이미지 너비를 기준으로 요소 배치 방법

화면의 오른쪽 하단에 배경 이미지 (850 x 1080)가 있습니다. 나는 폭의 38 %를 차지하도록 이미지 크기를 조절해야 :

background-position: right bottom; 
background-size: 38% auto; 
background-attachment: fixed;

가 지금은 다른 요소를 배치 할 같은 그것이 항상 배경의 특정 부분에 관계없이 화면 크기의 라인 업 영상. 나는 어떻게 그것에 대해 갈 것인가? 나는 현재 멀리 오른쪽 하단 모서리에서 설정된 거리에 설정되어 있지만, 이것은 내가 원하는되지 않습니다 : (

height: 220px; 
width: 155px; 
bottom: 400px; 
right: 400px;

My code can be found here, 나는 위치에 노력하고있어 일부 :hover + .hide의 정의에 12 행). 사용자 정의하려는 페이지는 MyAnimeList profile입니다. 여기에서 붉은 색 검 모양의 가장자리에 커버 아트를 배치하려고합니다.

출처

2014-10-28 Eunkai

뭔가입니까? http://stackoverflow.com/questions/11151089/position-one-element-related-to-another-in-css " –

컨테이너의 너비에 따라 배경 크기가 변경되므로 퍼센트 여백을 사용하여 요소의 위치를 지정할 수 있습니다. 퍼센트 여백은 컨테이너의 너비, 상단/하단 여백 (see here)에 따라 계산됩니다.

예 : 여기

:hover + .hide{ 
    position:absolute; 
    bottom:0; 
    right:0; 
    margin-bottom:20%; /* tune this */ 
    margin-right:20%; /* tune this */ 
}

이 같은 DEMO

출처

2014-10-28 10:39:17

마진 - 하단을 여백에 맞춰 만들 수있는 방법이 있습니까? 맞습니다. 배경의 높이를 auto로 설정 했습니까? – Eunkai

@Wyverncloak에서 말했듯이, margin bottom과 right는 둘 다 cotainer의 너비에 따라 계산됩니다. 예를 들어 둘 다 '20 %'로 설정하면 둘 다 가질 것입니다 부모의 너비에 따라 계산 된 'px'의 동일한 값 –

마진 - 오른쪽이 픽셀 단위로 나왔을 때 margin-bottom이 1.2 배가되기를 원한다는 것을 이해합니다. margin-right : 20 % 그 화면에 대해 100px로 나왔다. 마진 최저 120px를 만들고 싶다. – Eunkai

배경 이미지 너비를 기준으로 요소 배치 방법

답변

관련 문제