@charset "utf-8";
/* CSS Document */

#box1, #box2, #box3, #box4, #box5 {width: 500px; height: 300px; padding: 40px; border: 10px solid rgba(0, 0, 0, 0.3); margin: 30px; overflow: auto;}

#box1 {
  background-color: lime;
  background-image: url(../img/common/icon-no-image.png);
  background-position: left top;
  background-size: auto auto;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: border-box;
}

#box2 {
  background-image: url(../img/common/icon-face.png);
  background-attachment: fixed;
}

#box3 {
  background-color: lime;
  background-image: url(../img/common/icon-no-image.png), url(../img/common/icon-naver-blog.png), url(../img/intro-ci.png);
  background-position: left top, center center, right 10px bottom 10px;
  background-size: 200px auto, contain, auto auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: difference;
}

#box4 {
  background: lime url(../img/common/icon-no-image.png) center center / 200px auto no-repeat;
}



/*
#box1 {
  background-color: lime;
  background-image: url(../img/common/icon-no-image.png);
  background-position: center center;
  background-size: auto auto;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: border-box;
}

#box2 {
  background-image: url(../img/common/icon-face.png);
  background-attachment: scroll;
  background-repeat: no-repeat;
}

#box3 {
  background-color: lime;
  background-image: url(../img/common/icon-no-image.png), url(../img/common/icon-naver-blog.png), url(../img/intro-ci.png);
  background-position: left top, center center, right 10px bottom 10px;
  background-size: auto auto, contain, auto auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: difference;
}

#box4 {
  background: lime url(../img/common/icon-face.png) center center / 100px auto no-repeat;
}

#box5 {

}
*/



/*
position ---> x, y | center top | right 100px bottom 100px | 30% 10% | contain | cover
repeat --> repeat | repeat-x | repeat-y | no-repeat
origin(image) --> padding-box | border-box | content-box
clip(cut) --> border-box | padding-box | content-box
attachment --> scroll | fixed (뷰포트에 대해서 고정) | local

ㅇ background-blend-mode:
normal: 기본값. 레이어가 쌓입니다.
multiply: 색상을 곱해 더 어둡게 만듭니다 (어두운 부분 강조).
screen: 색상을 반전시켜 밝게 만듭니다 (밝은 부분 강조).
overlay: multiply와 screen을 혼합하여 대비를 강조합니다.
darken: 두 색상 중 어두운 색을 선택합니다.
lighten: 두 색상 중 밝은 색을 선택합니다.
difference: 두 색상의 차이를 보여줍니다.
hue / saturation / color / luminosity: 색조, 채도, 색상, 명도 등을 기준으로 혼합합니다.

ㅇ 축약 표현 (color image position/size repeat origin clip attachment)
background: lime url(../img/common/icon-face.png) center center / 100px auto no-repeat padding-box border-box scroll;
*/

