03백그라운드

background image , repeat ,background-position , background-size

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:hover{
            border-color: burlywood;
            background-color: violet;
            color:aquamarine;
        }
        .abox{
            width:1500px;
            height:1000px;
            border: 1px solid #777;
            color:blueviolet;

            background-color: black;
            background-image: url(img/생선만\ 골라먹는\ 아기\ 고양이.jpg); /*백그라운드 이미지 */
            background-repeat: no-repeat; /*이미지 반복여부*/
             /*이미지 위치 */
            /* background-position: bottom right; */
            background-position: 100px 200PX; /* 좌에서 떨어진 위치 , 상(위)에서 떨어진 위치 */
            background-size: 800px 500px; /*좌우,상하*/
        }
    </style>
</head>
<body>
    

    <p class = "abox">
        안녕하세요? 오늘을 날씨는 맑습니다.
    </p>
</body>
</html>

background-attachment : fixed;

사진을 백그라운드에고정시킨다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #wrap {
            height:500px;
            border: 1px solid #777;
            background-image: url(img/아기고양이.jpg);
            background-repeat: no-repeat;
            /* background-size: contain; 무조건 이미지가 잘리지 않도록 하고 , 나머지는 비움 */
            background-size:cover; /* 빈공간없이 꽉채우고 , 이미지를 자름 */
        }
        #wrap-mid{
            height: 500px;
            border:1px solid #777;

            background-image:url(img/아기고양이.jpg);
            background-size: cover;
            background-attachment: fixed;/* 스크롤과 상관없이 백그라운드 고정 - 마치 움직이는 효과*/
        }
    </style>
</head>
<body>
    
    <section id="wrap">
        /.......................................
    </section>

    <section id="wrap-mid">

    </section>

    <section style="height: 1000px;  border : 1px solid #777;" >

    </section>
</body>
</html>

밑의 이미지가 스크롤에 따라 마치 움직이는 것 처럼 나온다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            display: block;
            width: 300px;
            height: 45x;


            background-image: url(img/kakao_login_medium_wide.png);
            background-repeat: no-repeat;
            background-color: #fee500;

        }

        .btn2 {
            width: 300px;
            height: 45px;

            background-image: url(img/kakao_login_medium_wide.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            background-color: #fee500;
        }

        .btn3 {
            background-image: url(img/KakaoTalk_20240116_155138492.png);
            background-size: 433px 412px;
            background-position: -225px -209px;
            background-repeat: no-repeat;
            width: 44px;
            height: 44px;
            cursor:alias;
            border : 1px solid #e3e3e3;
            border-radius:20px;
            
        }
        
        .nw {
            display : block;
            background-image:url(img/KakaoTalk_20240116_155138492.png);
            background-size:433px 412px;
            background-position: -225px -209px;
            background-repeat: no-repeat;
            width:100px;
            height:100px;
            cursor:grab;
        }

        .new{
            background-image:url(img/KakaoTalk_20240116_155138492.png);
            background-size:433px 412px;
            background-position:0px;
            background-repeat: no-repeat;
            width:433px;
            height:412px;   
            cursor: pointer;
            background-color: aqua;
        }
        .btn5{
            background-image:url(img/KakaoTalk_20240116_155138492.png);
            background-size: 433px 412px;
            background-position: -225px -209px;
            background-repeat: no-repeat;
            width:44px;
            height:44px;
            cursor:pointer;
            display: block;
        }
    </style>
</head>

<body>

    <a href="#" class="btn"></a>
    <a href="http://comic.naver.com/index" class="btn5"></a>
    <hr>
    <button class="btn2"></button>

    <button class="btn3"></button>

    <button class="nw"></button>

    <button class="new"></button>
</body>

</html>

'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글

레이아웃-1 Float (0)	2024.01.26
패딩과 마진 (1)	2024.01.26
02-2 디스플레이 (1)	2024.01.26
02-1 폰트,오버플로우 (0)	2024.01.26
01. 선택자 (1)	2024.01.24