[CSS] background-clip과 background-origin

Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

POTATO THAT WANT TO BE HUMAN

[CSS] background-clip과 background-origin 본문

카테고리 없음

[CSS] background-clip과 background-origin

녜힝 2022. 5. 5. 22:32

🤔 background-clip

background-clip 은 배경 이미지나 배경색을 그 박스 중 어디에 넣을지 정하는 속성입니다.

기본값은 border-box 이며 테두리 영역과 그 안쪽 영역을 채웁니다.

border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
content-box : 내용 영역과 그 안쪽 영역을 채웁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제를 통해 확인해보겠습니다.

<head>
    <meta charset="UTF-8">
    <title>background-clip</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 20px 0;
            border: 5px dotted rgb(255, 101, 127);
            background-color: #eee;
            line-height: 200px;
            text-align: center;
            font-weight: 700;
        }
        .a {
            background-clip: border-box;
        }
        .b {
            background-clip: padding-box;
        }
        .c {
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <div class="a">border-box</div>
    <div class="b">padding-box</div>
    <div class="c">content-box</div>
</body>

🤔 background-origin

background-origin 은 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성입니다.

기본값은 padding-box 로 안쪽 여백 영역 왼쪽 위부터 채웁니다.

border-box : 테두리 영역 왼쪽 위부터 채웁니다.
padding-box : 안쪽 여백 영역 왼쪽 위부터 채웁니다.
content-box : 내용 영역 왼쪽 위부터 채웁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제를 통해 확인해보겠습니다.

<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 20px 0;
            padding: 30px;
            border: 5px dotted rgb(223, 38, 69);
            background-image: url('img/sky.jpg');
            background-repeat: no-repeat;
            line-height: 200px;
            text-align: center;
            font-weight: 700;
            color: #fff;
        }
        .a {
            background-origin: border-box;
        }
        .b {
            background-origin: padding-box;
        }
        .c {
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <div class="a">border-box</div>
    <div class="b">padding-box</div>
    <div class="c">content-box</div>
</body>

두번째 예제를 보겠습니다.

background-origin 속성값에 관계없이 배경이미지를 반복시키면 테두리 영역과 그 안쪽 영역을 다 채우고, 채우기 시작하는 위치만 달라집니다.

위 예제에서 background-repeat: no-repeat; 을 삭제해보겠습니다.

<head>
    <meta charset="UTF-8">
    <title>background-origin</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 20px 0;
            padding: 30px;
            border: 5px dotted rgb(223, 38, 69);
            background-image: url('img/sky.jpg');
            background-size: 90px;
            /* background-repeat: no-repeat; */
            line-height: 200px;
            text-align: center;
            font-weight: 700;
            color: #fff;
        }
        .a {
            background-origin: border-box;
        }
        .b {
            background-origin: padding-box;
        }
        .c {
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <div class="a">border-box</div>
    <div class="b">padding-box</div>
    <div class="c">content-box</div>
</body>

Comments

POTATO THAT WANT TO BE HUMAN

[CSS] background-clip과 background-origin 본문

[CSS] background-clip과 background-origin

🤔 background-clip

🤔 background-origin

티스토리툴바