[CSS] 배경 속성(이미지, 그라데이션, 그림자, 불투명도)

.test{
  background-image: url('이미지 주소');
  background-repeat: no-repeat;
  background-position:center;
  background-size: cover;
  }

background-image: url('이미지주소');

배경이미지를 넣을 수 있도록 하는 태그

background-position

배경의 위치를 정하는 태그 

top, right, bottom, left, left top(기본값), center

2개를 적으면 가로, 세로로 취급한다.(center center 가로 세로 둘 다 가운데 정렬)

background-repeat

이미지를 반복할지 않할지 정하는 태그

repeat, no-repeat

background-size

배경의 크기를 정하는 태그

cover(이미지의 비율을 유지하면서 꽉 차게, 잘릴 수 있음), contain(비율을 유지하며 최대한 크게, 잘리지 않음), 50px 20px(가로 50px 세로 20px)

.test{
background - image: linear-gradient(색상1, 색상2);
}

background-image: linear-gradient(색상1, 색상2);

이미지에 색상 그라데이션을 씨우는 태그. 기본적으로 위에서 아래로(180도)이 기본이다. 이를 바꾸고 싶으면

background-image:linear-gradient(각도, 색상1, 색상2); 로 입력한다.

.test{
box-shadow: 가로 세로 흐린정도 퍼지는정도 색상;
}

box-shadow: 가로 세로 흐린정도 퍼지는정도 색상;

이미지에 그림자를 생성하는 태그. 가로, 세로, 흐린 정도, 퍼지는 정도 모두 px로 쓴다.

.test{
opacity: 0~1 사이 값
}

 opacity: 0~1의 값

요소의 불투명도를 정하는 태그. 0일수록 투명, 1일수록 불투명하다.