본문 바로가기
Coding/HTML

[HTML]07. 배경 색과 배경 이미지 / 그라데이션 효과로 배경 꾸미기

by 찡콩찡 2022. 4. 11.
 배경 색과 배경 이미지

▶ background - image속성

▶ background - repeat속성

▶ background - size속성

▶ background - position 속성

  <style>
        div {
            width:500px;
            height:500px;
            border: 2px double black;
            margin-bottom: 20px;
        }
        .bg1 {
            background: url('images/bg4.jpg') no-repeat left top;
            background-size: auto;
        }
        .bg2 {
            background: url('images/bg4.jpg') no-repeat left top;
            background-size: 200px 150px;
        }
        .bg3 {
            background: url('images/bg4.jpg') no-repeat left top;
            background-size: 60% 80%;
        }
        .bg4{
            background: url('images/bg4.jpg') no-repeat left top;
            background-size: contain;
        }
        .bg5 {
            background: url('images/bg4.jpg') no-repeat left top;
            background-size: cover;
        }
        .bg6 {
            background: url('images/bg4.jpg') no-repeat left top;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="bg1"></div>
    <div class="bg2"> </div>
    <div class="bg3"></div>
    <div class="bg4"></div>
    <div class="bg5"></div>
    <div class="bg6"></div>
   
</body>
 

▶ background - position 속성

   <style>
        div {
            position: relative;
            margin-bottom: 20px;
        }
        button {
            left:20%;
            width: 140px;
            height: 50px;
            background-color: rgb(0,110,255);
            border:1px solid rgb(0,110,255);
            border-radius: 8px;
            color: #fff;
            font-weight:bold;
        }
        #bg1 {
            background-image:url('images/light.png');
            background-repeat: no-repeat;
            background-position: 5px 7px;
        }
        #bg2 {
            background-image:url('images/light.png');
            background-repeat: no-repeat;
            background-position: right center;
        }
    </style>
</head>
<body>
    <div >
        <button id="bg1">IDEA</button>
    </div>
    <div>
        <button id="bg2">IDEA</button>
    </div>
</body>

▶ background - origin 속성

 

    <style>
      div {
          width: 400px;
          height: 200px;
          padding:35px;
          border:15px solid #ccc;
          margin-bottom: 20px;
      }
      .bg1 {
          background: url('images/bg3.jpg') no-repeat;
          background-origin:padding-box ;
      }
      .bg2 {
          background: url('images/bg3.jpg') no-repeat;
          background-origin:border-box ;
      }
      .bg3 {
          background: url('images/bg3.jpg') no-repeat;
          background-origin:content-box ;
      }

    </style>
</head>
<body>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
</body>

▶ background - attachment 속성

<style>
     body{
         background: url('images/bottom-bg.jpg') no-repeat;
         background-position: center bottom;
         background-attachment: fixed;
     }
     div {
         width: 300px;
         height: auto; /*콘텐츠 양만큼 설정*/
         margin: 20px auto;
         padding: 20px;        
     }
     h1 {
         background-color: #222;
         color: white;
         text-align: center;
         padding: 10px;
     }

    </style>
    </head>
<body>
    <div>
        <h1>HTML</h1>
        <p>NO PAIN NO AGIN , Irure exercitaion ipusm mana proident commodo
            NO PAIN NO AGIN , Irure exercitaion ipusm mana proident commodo
            NO PAIN NO AGIN , Irure exercitaion ipusm mana proident commodo
            NO PAIN NO AGIN , Irure exercitaion ipusm mana proident commodo
            NO PAIN NO AGIN , Irure exercitaion ipusm mana proident commodo
            NO PAIN NO AGIN , Irure exercitaion ipusm mana proident commodo
            NO PAIN NO AGIN , Irure exercitaion ipusm mana proident commodo
</p>       
    </div>
그라데이션 효과로 배경 꾸미기

 

▶ 선형 그라데이터

<style>
    div {
        width: 500px;
        height: 300px;
        border-radius: 10px;
        }
        .grad {
            background: blue;
            background:linear-gradient(to right bottom, blue, white);         
             background: -webkit-linear-gradient(left top,blue,white);
            background: -moz-linear-gradient(left top, blue, white);
            background: -o-linear-gradient(right bottom, blue, white);

        }
</style>
</head>
<body>
    <div class="grad"></div>
</body>

     <style>
    div {
        width: 500px;
        height: 300px;
        border-radius: 10px;
        }
        .grad {
            background: red;
            background:linear-gradient(45deg, red, white);
            background: -webkit-linear-gradient(45deg,red,white);
            background: -moz-linear-gradient(45deg, red, white);
            background: -o-linear-gradient(45deg, red, white);

        }
    </style>

 

 <style>
        div {
            width: 500px;
            height: 300px;        
            }
            .grad {
                background: #06f;
                background:linear-gradient(to bottom, #06f, white 30%, #06f);
                background: -webkit-linear-gradient(top, #06f, white 30%, #06f);
                background: -moz-linear-gradient(bottom, #06f, white 30%, #06f);
                background: -o-linear-gradient(bottom, #06f, white 30%, #06f);
                }
        </style>
</head>
<body>
    <div class="grad"></div>
</body>

  <style>
       div {
          width: 500px;
          height: 300px;
          margin: 10px;        
           }
          .grad1 {
            background: red;
            background:radial-gradient(white,yellow,red);
            background: -webkit-radial-gradient(white,yellow,red);
            background: -moz-radial-gradient(white,yellow,red);
            background: -o-radial-gradient(white,yellow,red);
                }
          .grad2 {
            background: red;
            background:radial-gradient(circle, white,yellow,red);
                background: -webkit-radial-gradient(circle, white,yellow,red);
            background: -moz-radial-gradient(circle, white,yellow,red);
            background: -o-radial-gradient(circle,white,yellow,red);
 }
        </style>
</head>
<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
</body>

<style>
      div {
         width: 500px;
         height: 300px;
         margin: 10px;        
          }
        .grad {
            background: blue;
            background:radial-gradient(circle at 10% 10%,white,yellow,red);
             background: -webkit-radial-gradient(10% 10%, circle, white,yellow,red);
             background: -moz-radial-gradient(10% 10%,circle, white,yellow,red);
             background: -o-radial-gradient(10% 10%, circle, white,yellow,red);
                }          
    </style>
</head>
<body>
    <div class="grad"></div>  
</body>

 <style>
      div {
          display:inline-block;
          width: 300px;
          height: 300px;
          border: 1px solid black;
          margin: 10px;        
            }

     #div1 {
         background: darkgreen;
         background:radial-gradient(circle closest-side at 30% 40%,white,yellow,green);
         background: -webkit-radial-gradient(30% 40%, circle,closest-side, white,yellow,green);
         background: -moz-radial-gradient(30% 40%, circle,closest-side, white,yellow,green);
          background: -o-radial-gradient(30% 40%, circle,closest-side, white,yellow,green);
                }  

     #div2 {
          background: darkgreen;
          background:radial-gradient(circle closest-corner at 30% 40%,white,yellow,green);
          background: -webkit-radial-gradient(30% 40%, circle,closest-corner, white,yellow,green);
           background: -moz-radial-gradient(30% 40%, circle,closest-corner, white,yellow,green);
           background: -o-radial-gradient(30% 40%, circle,closest-corner, white,yellow,green);
              }  

     #div3 {
           background: darkgreen;
           background:radial-gradient(circle farthest-corner at 30% 40%,white,yellow,green);
           background: -webkit-radial-gradient(30% 40%, circle,farthest-corner, white,yellow,green);
           background: -moz-radial-gradient(30% 40%, circle,farthest-corner, white,yellow,green);
           background: -o-radial-gradient(30% 40%, circle,farthest-corner, white,yellow,green);
              }  

    #div4 {
             background: darkgreen;
             background:radial-gradient(circle farthest-side at 30% 40%,white,yellow,green);
             background: -webkit-radial-gradient(30% 40%, circle,farthest-side, white,yellow,green);
             background: -moz-radial-gradient(30% 40%, circle,farthest-side, white,yellow,green);
             background: -o-radial-gradient(30% 40%, circle,farthest-side, white,yellow,green);
              }              
    </style>
</head>

<body>
    <div id="div1"></div>  
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>

<style>
       div {
          width: 300px;
          height: 300px;            
          margin: 10px;        
            }
  #div1 {
      background: skyblue;
      background:radial-gradient(red,yellow,skyblue);
      background: -webkit-radial-gradient(red,yellow,skyblue);
      background: -moz-radial-gradient(red,yellow,skyblue);
      background: -o-radial-gradient(red,yellow,skyblue);
               }  
  #div2 {
     background: skyblue;
     background:radial-gradient(red,yellow 20%,skyblue);
     background: -webkit-radial-gradient(red,yellow 20%,skyblue);
     background: -moz-radial-gradient(red,yellow 20%,skyblue);
    background: -o-radial-gradient(red,yellow 20%,skyblue);
    </style>

 

<style>
    div {
     width: 500px;
     height: 300px;            
      margin: 10px;        
           }
    #div1 {
       background: red;
       background:repeating-linear-gradient(yellow,yellow 20px,red 20px,red 40px);
       background: -webkit-repeating-linear-gradient(yellow,yellow 20px,red 20px,red 40px);
       background: -moz-repeating-linear-gradient(yellow,yellow 20px,red 20px,red 40px);
        background: -o-repeating-linear-gradient(yellow,yellow 20px,red 20px,red 40px);
                }  
           
    </style>
</head>

<body>
    <div id="div1"></div>    
</body>
<style>
        div {
            width: 500px;
            height: 300px;            
            margin: 10px;        
            }
        #div2 {
           background: red;
           background:repeating-linear-gradient(yellow,red 20px);
           background: -webkit-repeating-linear-gradient(yellow,red 20px);
           background: -moz-repeating-linear-gradient(yellow,red 20px);
           background: -o-repeating-linear-gradient(yellow,red 20px);
                }             
    </style>
</head>
<body>
      <div id="div2"></div>
</body>    
<style>
    div {
       width: 500px;
       height: 300px;            
       margin: 10px;        
            }
  #div1 {
     background: #ccc;
     background:repeating-radial-gradient(circle,white,white 10%,#ccc, #ccc 20%);
     background: -webkit-repeating-linear-gradient(circle,white,white 10%,#ccc , #ccc 20%);
     background: -moz-repeating-linear-gradient(circle,white,white 10%,#ccc , #ccc 20%);
     background: -o-repeating-linear-gradient(circle,white,white 10%,#ccc , #ccc 20%);
                }  
 #div2 {
     background: #ccc;
     background:repeating-radial-gradient(circle,white,white 10%,#ccc 10%, #ccc 20%);
     background: -webkit-repeating-linear-gradient(circle,white,white 10%,#ccc 10%, #ccc 20%);
     background: -moz-repeating-linear-gradient(circle,white,white 10%,#ccc 10%, #ccc 20%);
     background: -o-repeating-linear-gradient(circle,white,white 10%,#ccc 10%, #ccc 20%);
            }  
         
    </style>
</head>

<body>
    <div id="div1"></div>  
    <div id="div2"></div>    
저작자표시 비영리 (새창열림)

'Coding > HTML' 카테고리의 다른 글

CSS3 선택자 : 가상 클래스와 가상 요소  (0) 2022.05.16
HTML5와 멀티미디어 : 웹과 멀티미디어 / 오디오 & 비디오 재생하기  (0) 2022.05.09
[html] 간단한 실습 : 홈페이지 만들어보기  (0) 2022.04.25
[html 폼 만들기] style 시트 살짝 첨가/input태그  (0) 2022.03.14
[html 링크 만들기] 글자에 링크 연결하기  (0) 2022.03.14

관련글

티스토리툴바