티스토리 뷰

CSS

CSS BACKGROUND

카레우동먹고싶다 2019. 6. 28. 18:49

Background

Property Sample Description
background background: #000 url(background.gif) no-repeat top center 배경 속성 단축형
background-image background-image: url(이미지 경로) 배경 이미지 설정
background-repeat background-repeat: no-repeat 배경 이미지 반복 여부 설정
background-attachment background-attachment: fixed 배경 고정 여부 설정
background-color background-color: #fff 배경색 설정
background-position background-position: top 배경 이미지 위치 설정
background-origin background-origin: content-box 배경 위치 속성 여부 설정
background-size background-size: cover 배경이미지 사이즈 설정
background-clip background-clip: content-box 배경 적용 범위 설정

Background Gradients

Value Sample Description
linear-gradient background-image : linear-gradient(direction, color1, color2....) 선형 그라데이션 백그라운드를 설정합니다.
radial-gradient background-image : radial-gradient(color1, color2....) 원형 그라데이션 백그라운드를 설정합니다.
repeating-linear-gradient background-image : repeating-linear-gradient(direction, color1, color2....) 반복 선형 그라데이션 백그라운드를 설정합니다.
repeating-radial-gradient background-image : repeating-radial-gradient(color1, color2....) 반복 원형 그라데이션 백그라운드를 설정합니다.

linear-gradient : to top, to left, to right, to bottom

gradient01
gradient02
gradient03
gradient04
.gradient01 {background-image: linear-gradient(to top, #84fab0 0%, #8fd3f4 100%);}
.gradient02 {background-image: linear-gradient(to left, #84fab0 0%, #8fd3f4 100%);}
.gradient03 {background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%);}
.gradient04 {background-image: linear-gradient(to bottom, #84fab0 0%, #8fd3f4 100%);}

linear-gradient : top, left, right, bottom

gradient05
gradient06
gradient07
gradient08
.gradient05 {background-image: -webkit-linear-gradient(top, #96fbc4 0%, #f9f586 100%);}
.gradient06 {background-image: -webkit-linear-gradient(left, #96fbc4 0%, #f9f586 100%);}
.gradient07 {background-image: -webkit-linear-gradient(right, #96fbc4 0%, #f9f586 100%);}
.gradient08 {background-image: -webkit-linear-gradient(bottom, #96fbc4 0%, #f9f586 100%);}

linear-gradient : left top, right top, left bottom, right bottom

gradient09
gradient10
gradient11
gradient12
.gradient09 {background-image: -webkit-linear-gradient(left top, #b3ffab 0%, #12fff7 100%);}
.gradient10 {background-image: -webkit-linear-gradient(right top, #b3ffab 0%, #12fff7 100%);}
.gradient11 {background-image: -webkit-linear-gradient(left bottom, #b3ffab 0%, #12fff7 100%);}
.gradient12 {background-image: -webkit-linear-gradient(right bottom, #b3ffab 0%, #12fff7 100%);}

linear-gradient : deg

gradient13
gradient14
gradient15
gradient16
gradient17
gradient18
gradient19
gradient20
.gradient13 {background-image: linear-gradient(0deg, #abecd6 0%, #fbed96 100%);}
.gradient14 {background-image: linear-gradient(20deg, #abecd6 0%, #fbed96 100%);}
.gradient15 {background-image: linear-gradient(40deg, #abecd6 0%, #fbed96 100%);}
.gradient16 {background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);}
.gradient17 {background-image: linear-gradient(80deg, #abecd6 0%, #fbed96 100%);}
.gradient18 {background-image: linear-gradient(100deg, #abecd6 0%, #fbed96 100%);}
.gradient19 {background-image: linear-gradient(120deg, #abecd6 0%, #fbed96 100%);}
.gradient20 {background-image: linear-gradient(140deg, #abecd6 0%, #fbed96 100%);}

linear-gradient : color

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
.gradient21 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8);}
.gradient22 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8, #f3e7e9);}
.gradient23 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8, #f3e7e9, #e3eeff);}
.gradient24 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8, #f3e7e9, #e3eeff, #fe5196);}
.gradient25 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8, #f3e7e9, #e3eeff, #fe5196, #50c9c3);}
.gradient26 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8, #f3e7e9, #e3eeff, #fe5196, #50c9c3, #f794a4);}
.gradient27 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8, #f3e7e9, #e3eeff, #fe5196, #50c9c3, #f794a4, #0fd850);}
.gradient28 {background-image: linear-gradient(140deg, #ddd6f3, #faaca8, #f3e7e9, #e3eeff, #fe5196, #50c9c3, #f794a4, #0fd850, #df89b5);}

linear-gradient : color position

gradient29
gradient30
gradient31
gradient32
gradient33
gradient34
gradient35
gradient36
.gradient29 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 20%, #f3e7e9 100%);}
.gradient30 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 30%, #f3e7e9 100%);}
.gradient31 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 40%, #f3e7e9 100%);}
.gradient32 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 50%, #f3e7e9 100%);}
.gradient33 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 60%, #f3e7e9 100%);}
.gradient34 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 70%, #f3e7e9 100%);}
.gradient35 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 80%, #f3e7e9 100%);}
.gradient36 {background-image: linear-gradient(140deg, #ddd6f3 0%, #faaca8 90%, #f3e7e9 100%);}

linear-gradient : color position2

gradient37
gradient38
gradient39
gradient40
.gradient37 {background-image: linear-gradient(45deg, #ddd6f3 50%, #f3e7e9 50%);}
.gradient38 {background-image: linear-gradient(90deg, #ddd6f3 50%, #f3e7e9 50%);}
.gradient39 {background-image: linear-gradient(120deg, #ddd6f3 50%, #f3e7e9 50%);}
.gradient40 {background-image: linear-gradient(160deg, #ddd6f3 50%, #f3e7e9 50%);}

linear-gradient : color position3

gradient41
gradient42
gradient43
gradient44
.gradient41 {background-image: linear-gradient(90deg, #e0f2f1 50%, #b2dfdb 50%);}
.gradient42 {background-image: linear-gradient(90deg, #e0f2f1 33.3333%, #b2dfdb 33.3333% 66.6666%, #80cbc4 66.6666%);}
.gradient43 {background-image: linear-gradient(90deg, #e0f2f1 25%, #b2dfdb 25% 50%, #80cbc4 50% 75%, #4db6ac 75%);}
.gradient44 {background-image: linear-gradient(90deg, #e0f2f1 20%, #b2dfdb 20% 40%, #80cbc4 40% 60%, #4db6ac 60% 80%, #26a69a 80%);}

linear-gradient : fixed

gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
.gradient45 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}
.gradient46 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}
.gradient47 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}
.gradient48 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}
.gradient49 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}
.gradient50 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}
.gradient51 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}
.gradient52 {background: linear-gradient(-20deg, #ddd6f3, #f5576c) fixed;}

radial-gradient : position

gradient60
gradient61
gradient62
gradient63
gradient64
gradient65
gradient66
gradient67
.gradient60 {background-image: radial-gradient(#2a5298 0%, #209cff 20%, #68e0cf 100%);}
.gradient61 {background-image: radial-gradient(#2a5298 0%, #209cff 30%, #68e0cf 100%);}
.gradient62 {background-image: radial-gradient(#2a5298 0%, #209cff 40%, #68e0cf 100%);}
.gradient63 {background-image: radial-gradient(#2a5298 0%, #209cff 50%, #68e0cf 100%);}
.gradient64 {background-image: radial-gradient(#2a5298 0%, #209cff 60%, #68e0cf 100%);}
.gradient65 {background-image: radial-gradient(#2a5298 0%, #209cff 70%, #68e0cf 100%);}
.gradient66 {background-image: radial-gradient(#2a5298 0%, #209cff 80%, #68e0cf 100%);}
.gradient67 {background-image: radial-gradient(#2a5298 0%, #209cff 90%, #68e0cf 100%);}

radial-gradient : Color add

gradient68
gradient69
gradient70
gradient71
gradient72
gradient73
gradient74
gradient75
.gradient68 {background-image: radial-gradient(#38f9d7, #f5576c);}
.gradient69 {background-image: radial-gradient(#38f9d7, #f5576c, #fed6e3);}
.gradient70 {background-image: radial-gradient(#38f9d7, #f5576c, #fed6e3, #fee140);}
.gradient71 {background-image: radial-gradient(#38f9d7, #f5576c, #fed6e3, #fee140, #a8edea);}
.gradient72 {background-image: radial-gradient(#38f9d7, #f5576c, #fed6e3, #fee140, #a8edea, #fed6e3);}
.gradient73 {background-image: radial-gradient(#38f9d7, #f5576c, #fed6e3, #fee140, #a8edea, #fed6e3, #43e97b);}
.gradient74 {background-image: radial-gradient(#38f9d7, #f5576c, #fed6e3, #fee140, #a8edea, #fed6e3, #43e97b, #d299c2);}
.gradient75 {background-image: radial-gradient(#38f9d7, #f5576c, #fed6e3, #fee140, #a8edea, #fed6e3, #43e97b, #d299c2, #9795f0);}

radial-gradient : position

gradient76
gradient77
gradient78
gradient79
.gradient76 {background-image: radial-gradient(#e0f2f1 50%, #b2dfdb 50%);}
.gradient77 {background-image: radial-gradient(#e0f2f1 33.3333%, #b2dfdb 33.3333% 66.6666%, #80cbc4 66.6666%);}
.gradient78 {background-image: radial-gradient(#e0f2f1 25%, #b2dfdb 25% 50%, #80cbc4 50% 75%, #4db6ac 75%);}
.gradient79 {background-image: radial-gradient(#e0f2f1 20%, #b2dfdb 20% 40%, #80cbc4 40% 60%, #4db6ac 60% 80%, #26a69a 80%)

radial-gradient : position

gradient80
gradient81
gradient82
gradient83
gradient84
gradient85
gradient86
gradient87
.gradient80 {background-image: radial-gradient(ellipse farthest-corner at center top, #f5576c 0%,  #fed6e3 100%);}
.gradient81 {background-image: radial-gradient(ellipse farthest-corner at left top, #f5576c 0%,  #fed6e3 100%);}
.gradient82 {background-image: radial-gradient(ellipse farthest-corner at right top, #f5576c 0%,  #fed6e3 100%);}
.gradient83 {background-image: radial-gradient(ellipse farthest-corner at bottom left, #f5576c 0%,  #fed6e3 100%);}
.gradient84 {background-image: radial-gradient(ellipse farthest-corner at bottom center, #f5576c 0%,  #fed6e3 100%);}
.gradient85 {background-image: radial-gradient(ellipse farthest-corner at bottom right, #f5576c 0%,  #fed6e3 100%);}
.gradient86 {background-image: radial-gradient(ellipse farthest-corner at left center, #f5576c 0%,  #fed6e3 100%);}
.gradient87 {background-image: radial-gradient(ellipse farthest-corner at right center, #f5576c 0%,  #fed6e3 100%);}

radial-gradient : fixed

gradient88
gradient89
gradient90
gradient91
gradient92
gradient93
gradient94
gradient95
.gradient88 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}
.gradient89 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}
.gradient90 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}
.gradient91 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}
.gradient92 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}
.gradient93 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}
.gradient94 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}
.gradient95 {background: radial-gradient(#f5576c 0%,  #fed6e3 100%) fixed;}

repeating-linear-gradient

gradient100
gradient101
gradient102
gradient103
.gradient100 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #f5576c 10px,  #fed6e3 45px);}
.gradient101 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #f5576c 10px,  #fed6e3 45px);}
.gradient102 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #f5576c 10px,  #fed6e3 45px);}
.gradient103 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #f5576c 10px,  #fed6e3 45px);}

repeating-linear-gradient

gradient104
gradient105
gradient106
gradient107
.gradient104 {background-image: repeating-linear-gradient(45deg, transparent 5px, transparent 25px, #33691e 10px, #7cb342 45px);}
.gradient105 {background-image: repeating-linear-gradient(45deg, transparent 10px, transparent 25px, #33691e 15px, #7cb342 45px);}
.gradient106 {background-image: repeating-linear-gradient(45deg, transparent 15px, transparent 25px, #33691e 20px, #7cb342 45px);}
.gradient107 {background-image: repeating-linear-gradient(45deg, transparent 20px, transparent 25px, #33691e 25px, #7cb342 45px);}

repeating-radial-gradient

gradient100
gradient101
gradient102
gradient103
.gradient108 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 10px);}
.gradient109 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 15px);}
.gradient110 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 20px);}
.gradient111 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 5px, #fda085 25px);}

repeating-radial-gradient

gradient112
gradient113
gradient114
gradient115
.gradient112 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 10px, #fda085 10px);}
.gradient113 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 15px, #fda085 15px);}
.gradient114 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 20px, #fda085 20px);}
.gradient115 {background-image: repeating-radial-gradient(#f6d365, #f6d365 5px, #fda085 25px, #fda085 25px);}

UP NEXT : CSS

댓글