[CSS] 배경이미지 & 색상

[CSS] 배경이미지 & 색상

css에서 background image 불러오기

background-image: url(img0/cat_bg.png);

 

배경이미지는 부모속성보다 이미지가 작을 경우, 반복되는 성격

 

background-image: url(image/cat_bg.png),url(image/land_bg.png);

/*배경이미지를 반복하여 불러올 때 쉼표로 표현, 앞쪽에 불러온 이미지가 위에 표현*/

 

 

배경이미지 반복 제거

      body{

        background-image: url(image/web.jpg);

        background-repeat: no-repeat; /*반복하지 않겠다*/

      }

 

가로, 세로축만 반복

background-repeat: repeat-x; 가로 반복

background-repeat: repeat-y; 세로 반복

 

박스에서 배경이미지를 표현하는 경우 폭이 존재해야 함

 

 

배경이미지 크기(사이즈) 변경

        background-size: 100%; /*고정비로 100% 나타냄*/

        /*w(가로폭)h(세로폭) px,%*/

        /*auto: 이미지 원래 크기 유지*/

        /*cover 가지고 있는 비율을 유지하며 요소가 꽉 차게*/

 

 

스크롤에 따른 배경이미지

        background-attachment: scroll; /*스크롤에 영향*/

        height: 3000px;

 

background-attachment: fixed; /*배경이미지를 화면에 고정*/

 

 

배경이미지 위치 설정

        background-position: 100px, 200px;

        /*x위치(left,right,center) y위치(top center, bottom) -- left, top이 기본 속성, %, px*/

 

 

색상 표현 방식

      #hex{

        background-color: #c1cb9d;

      }

 

      #word{

        background-color: gray;

      }

 

      #rgb{

        /*background-color: rgb(100,0,0); 괄호 안에서 쉼표로 구분짓기*/

        background-color: rgba(100, 0, 0, 0.5); /*색상에 투명도를 부여, 0~1까지*/

      }

 

      #hsl{

        /*hsl - > 많이 사용되는 편은 아님*/

        background-color: hsla(127, 35%, 62%, 0.5);

      }

 

      #opa{

        background-color:  #c1cb9d;

        opacity: 0.5; /*전체 내부(콘텐츠까지)를 투명하게 설정*/

      }

 

opacity와 알파값의 차이 명확하게 인지하기

 

www.evernote.com/l/AleQ3u0VuCNNfI6JMcKAfUVN-5oZSldhPXg/

웹사이트 단락 구성해보기, [CSS] 배경이미지 & 색상