Stack/CSS

[CSS] background 연습

7ingout 2022. 4. 8. 15:27

배경에 효과를 주는데 사용되는 속성들

1) background-color: 요소의 배경색을 지정

red / #000000 / rgb(r, g, b) / rgba(r, g, b, a)

속기법 backgorund

 

2) background-image: 요소의 배경에 이미지를 지정

ex> background-image:url("dog.jpg");

 

3) background-repeat: 배경이미지의 가로 및 세로 반복을 지정

no-repeat / repeat-x / repeat-y

 

4) background-position: 배경이미지의 시작 위치를 지정

top center bottom

left center right

ex> div { background-position: right bottom; }

 

5) background-attachment: 배경 이미지 스크롤에 첨부할지를 지정

scroll / fixed

 

6) background-size: 배경이미지의 크기

cover

ex> div { background-size: 200px auto; }

background-size background-position

background: url('') no-repeat 50px 50px / 200px

 

7)background-blend-mode

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box01 { 
            width: 1000px; 
            height: 500px;
            background: url("./dog.jpg") center center no-repeat blanchedalmond;
        } 
        #box02 { 
            background-image: url("./dog.jpg");
            background-attachment: fixed;
            width: 100%; 
            height: 5000px;
        }     
    </style>
</head>
<body>
    <body>
        <div id="box01">box01</div>
        <div id="box02">box02</div>
        <div>box03</div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 1000px;
            height: 500px;
            /* background-image: url("./dog.jpg");
            background-repeat: no-repeat;
            background-color: blanchedalmond;
            background-position: center center; */
            background: url("./dog.jpg") center center no-repeat blanchedalmond;
            /* background-size: ; */
        }
    </style>
</head>
<body>
    <div>box01</div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div { 
                width: 1000px; 
                height: 600px; 
                margin: 0 auto;
                /* background-image: url(./dog.jpg), url(./dog2.jpg); 
                background-repeat: no-repeat, no-repeat;
                background-size: 300px, 200px;
                background-position: left top, right top;
                background-color: aliceblue; */
                background: url('./dog.jpg') no-repeat left top / 600px pink; /* ,url("./dog2.jpg") no-repeat 200px 50px / 400px pink; */
                background-blend-mode: difference;
            }
    </style>
</head>
<body>
    <div>box1입니다.</div>
</body>
</html>