[CSS] 배경 이미지 그라데이션 속성 / 이미지 점점 흐리게

 

 

 

linear-gradient 에서

to bottom 하면 아래서부터

rgba(색상, 투명도) 위치

※ 투명도가 작을수록 흐릿하며, 0일 때는 안보임

rgba(255, 255, 255, 0) 10%, 아래 끝부터 화면 10% 까지는 흰색 투명도 0
rgba(255, 255, 255, 0.5) 25%, 10%부터 화면 25% 까지는 흰색 투명도 0.5

rgba(255, 255, 255, 0.7) 40%, 25%부터 화면 40% 까지는 흰색 투명도 0.7
rgba(255, 255, 255, 1) 50%, 40%부터 화면 50% 까지는 흰색 투명도 1
rgba(255, 255, 255, 1) 100% 50%부터 화면 위 끝 까지는 흰색 투명도 1

 

 

 

 

★ url 이미지가 linear-gradient 보다 먼저 오면 linear-gradient가 적용되지않으므로 주의할것!!

(먼저 쓴 값이 화면 바깥쪽으로 적용)

★ 사진 크기마다 조정을 다시 해야하고  background-size: contain; 에 따라서도 달라짐

★ background-size: contain | cover 

- contain : 이미지의 너비와 높이가 영역의 안쪽에 알맞은 비율로 적용됨

- cover :  영역 전체에 이미지가 완전히 덮히도록 적용됨(이미지 일부분이 보이지 않을 수 있음)

 

 

 

반응형

 

 

 

background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 10%,
      rgba(255, 255, 255, 0.5) 25%,
      rgba(255, 255, 255, 0.7) 40%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 1) 75%,
      rgba(255, 255, 255, 1) 100%
    ),
    url("img/spain_4.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 30px;
}

 

결과