background-position

6867 단어 CSSCSS

background-position

The **background-position** CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

백그라운드 포지션 설명.

값 0에는 px 붙이지 않음.

<html>

<head>
    <style>
        .hero {
            background: url(https://js.cx/drag-heroes/heroes.png);
            width: 130px;
            height: 128px;
        }

        .hero2 {
            background: url(https://js.cx/drag-heroes/heroes.png);
        }

        #superhero {
            background-position: 0 -128px;     
        }   

        #hulk {
            background-position: -250px 0;     
        }   

    </style>
</head>

<body>
    <div class="hero">

    </div>

    <img src="https://js.cx/drag-heroes/heroes.png">

    <div id="superhero" class="hero">

    </div>

    <div id="hulk" class="hero">

    </div>
</body>

</html>

기본적으로 url 'https://js.cx/drag-heroes/heroes.png' 링크를 통해 불러오게 되면 히어로 여러명이 존재하는 사진이 추출된다. 그것을 div 컨테이너의 background(배경)으로 설정해주고 한 명의 히어로만이 노출될 수 있는 컨테이너의 크기(width, height)를 임의로 설정해준다.

background-position: 0 -128px; 이런 방법으로 X축 Y축을 조정하게 되면 div 컨테이너는 가만히 있지만 사진만 뒤에서 움직이게 되는 효과를 만들어 각 컨테이너에 여러명의 히어로를 하나씩 배치할 수 있는 것이다.

div는 그냥 틀임. 사진 프레임이라고 생각하라. (img spread기법)

Background-position으로 X축 Y축 배경 이미지를 움직일 수 있음.

(물론, Background가 설정되어야 함.)

Width: 130, height:128을 통하여 틀과 배경이미지를 설정함.

거기서 이미지를 움직이면서 보여줄 “히어로”만 틀에 맞춘 방식.

ㅁㅁㅁㅁ
ㅁㅁㅁ

궁극적으로, 각 히어로들은 div 틀로 되어 있어 개별적으로 이용 가능하게됨.

백준 1038번 [감소하는 수 | python]
상속을 제어하기 (inherit, initial,unset)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage