초보코딩

background-image , background position

wangmandoo1 2024. 7. 20. 12:03

 

배경이미지 넣는 법 ('url') 사용

background-image: url('wangmandoo.png');

 

background-repeat: repeat;  반복하기 
background-repeat: no-repeat; 반복 안 함 

 

백 그라운드 포지션 

background-position: top; 위
background-position: right; 우
background-position: bottom; 하
background-position: left; 좌
background-position: left top; 좌상
background-position: center;중, 가운데 

 

background-size 

 

background-size: cover; 풀사이즈 ,
background-size: contain; / 최대한크게 
background-size: 40px 30px; 가로 40 , 세로 30 

 

그라디언트 ,

 background-image: linear-gradient(#000000, #ffffff);

background-image:
  linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

각도 추가 하면 그라디언트 각도 변경 됨 

 

 

box shadow 

박스 그림자 

그린 정도 

box-shadow : 10px 10px 5px 8px rgba(0,0,0,0.8);

 

 

opacity 불투명도 

0에서 1 사이 소수값으로 쓰면 됨 

0에 가까울 수록 투명 

1에 가까울 수록 불투명 

opacity:0;

opacity:0.9