티스토리 뷰

 

배경이미지 넣기

배경 이미지를 넣어준다

section {
  /* 배경 */
  background: url("../image/rose.jpg");
  
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

배경이미지 등장

그라데이션 넣기

 

 

 

그라데이션 넣기

section {

  background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    ),
    url("../image/rose.jpg");
    
/* linear-gradient << 선형 그라디언트 */
/* 방향 to top right bottom left */
/* rgb(a) 방향으로의 비율(퍼센트) */
    
    
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

그라디언트 따단~

여러개의 그라데이션 넣기

section {

  background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 0, 0, 0) 0%,
      rgba(255, 0, 0, 0.5) 100%
    ),
    url("../image/rose.jpg");
    
    
    
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

 

원형 그라데이션 넣기

원형으로도 가능하다.

(% 가 낮을수록 원의 중심이다)

section {
/*방향은 고정되어 있기에 안적는다*/
  background: radial-gradient(
      rgba(0, 0, 0, 0) 0%,
      rgba(247, 187, 187, 0.4) 100%),
    url("../image/rose.jpg");
    
    
    
  height: 800px;
  width: 1200px;
  background-repeat: no-repeat;
}

끝!

'웹개발(프론트)' 카테고리의 다른 글

무료 icon 쓰기 / fontAwesome  (0) 2021.02.14
html 그리기 Svg / Canvas  (0) 2021.02.13
html 줄 긋기  (0) 2021.02.12
VisualCode 한국어로 바꾸기  (0) 2021.02.10
웹 퍼블리셔(Web Publisher)란  (0) 2021.02.09
댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/08   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함