티스토리 뷰

CSS Referance

[CSS] BACKGROUND

ppiggyfly 2019. 6. 28. 14:11

CSS 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 : top, left, right, bottom

gradient01
gradient02
gradient03
gradient04
.block{width: 180px; height: 180px; margin: 50px; font-size:18px; line-height:180px; color:#fff; cursor:pointer; text-align:center; float: left;}
.block >div {border-radius:50%; }
.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, #a6c0fe 0%, #f68084 100%);}
.gradient06{background-image: -webkit-linear-gradient(left,#a6c0fe 0%, #f68084 100%);}
.gradient07{background-image: -webkit-linear-gradient(right, #a6c0fe 0%, #f68084 100%);}
.gradient08{background-image: -webkit-linear-gradient(bottom, #a6c0fe 0%, #f68084 100%);}

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

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

linear-gradient : deg

gradient13
gradient14
gradient15
gradient16
gradient17
gradient18
gradient19
gradient20
.gradient13{background-image: -webkit-linear-gradient(0deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
.gradient14{background-image: -webkit-linear-gradient(20deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
.gradient15{background-image: -webkit-linear-gradient(40deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
.gradient16{background-image: -webkit-linear-gradient(60deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
.gradient17{background-image: -webkit-linear-gradient(80deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
.gradient18{background-image: -webkit-linear-gradient(100deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
.gradient19{background-image: -webkit-linear-gradient(120deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}
.gradient20{background-image: -webkit-linear-gradient(140deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}

linear-gradient : color

gradient21
gradient22
gradient23
gradient24
gradient25
gradient26
gradient27
gradient28
.gradient21{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf);}
.gradient22{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf , #57c6e1);}
.gradient23{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf , #57c6e1 , #b49fda , #7ac5d8 );}
.gradient24{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf , #57c6e1, #b49fda , #7ac5d8 ,#aed581);}
.gradient25{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf , #57c6e1, #b49fda , #7ac5d8,#aed581,#311b92);}
.gradient26{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf , #57c6e1 , #b49fda , #7ac5d8,#aed581,#311b92,#546e7a);}
.gradient27{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf , #57c6e1 , #b49fda , #7ac5d8,#aed581,#311b92,#546e7a,#ff6f00);}
.gradient28{background-image: -webkit-linear-gradient(140deg, #eea2a2, #bbc1bf , #57c6e1 , #b49fda , #7ac5d8,#aed581,#311b92,#546e7a,#ff6f00,#3e2723);}

linear-gradient : color position1

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

linear-gradient : colr position2

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

linear-gradient : colr position3

gradient41
gradient42
gradient43
gradient44
.gradient41{background-image: linear-gradient(90deg, #1de9b6 50%, #1a237e 50%);}
.gradient42{background-image: linear-gradient(90deg, #1de9b6 33.333%, #1a237e 33.333% 66.666%, #9e9d24 66.666% );}
.gradient43{background-image: linear-gradient(90deg, #1de9b6 25%, #1a237e 25% 50%, #9e9d24 50% 75%, #5d4037 75%);}
.gradient44{background-image: linear-gradient(90deg, #1de9b6 20%, #1a237e 20% 40%, #9e9d24 40% 60%, #5d4037 60% 80%,#ff3d00 80%);}

linear-gradient :fixed

gradient45
gradient46
gradient47
gradient48
gradient49
gradient50
gradient51
gradient52
.gradient45{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;}
.gradient46{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;}
.gradient47{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;}
.gradient48{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;} 
.gradient49{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;}
.gradient50{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;}
.gradient51{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;}
.gradient52{background: linear-gradient(-20deg, #ff6f00 0%, #1b5e20 100%) fixed;}

linear-gradient : position

gradient60
gradient61
gradient62
gradient63
gradient64
gradient65
gradient66
gradient67
.gradient60{background-image: radial-gradient( #ff6f00 0%, #1b5e20 20%, #e65100 100%);}
.gradient61{background-image: radial-gradient( #ff6f00 0%, #1b5e20 30%, #e65100 100%);}
.gradient62{background-image: radial-gradient( #ff6f00 0%, #1b5e20 40%, #e65100 100%);}
.gradient63{background-image: radial-gradient( #ff6f00 0%, #1b5e20 50%, #e65100 100%);} 
.gradient64{background-image: radial-gradient( #ff6f00 0%, #1b5e20 60%, #e65100 100%);}
.gradient65{background-image: radial-gradient( #ff6f00 0%, #1b5e20 70%, #e65100 100%);}
.gradient66{background-image: radial-gradient( #ff6f00 0%, #1b5e20 80%, #e65100 100%);}
.gradient67{background-image: radial-gradient( #ff6f00 0%, #1b5e20 90%, #e65100 100%);}

linear-gradient : Color add

gradient68
gradient69
gradient70
gradient71
gradient72
gradient73
gradient74
gradient75
.gradient68{background-image: radial-gradient( #ff6f00, #1b5e20);}
.gradient69{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100);}
.gradient70{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b);}
.gradient71{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1);} 
.gradient72{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c);}
.gradient73{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c,#4e342e);}
.gradient74{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c,#4e342e,#b71c1c);}
.gradient75{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c,#4e342e,#b71c1c,#546e7a );}

linear-gradient : Color add

gradient76
gradient77
gradient78
gradient79
.bac2 >div {border-radius:5px; }                    
.gradient76{background-image: radial-gradient( #ff6f00 50%, #1b5e20 50%);}
.gradient77{background-image: radial-gradient( #ff6f00 33.333%, #1b5e20 33.333% 66.666%, #e65100 66.666%);}
.gradient78{background-image: radial-gradient( #ff6f00 25%, #1b5e20 25% 50%, #e65100 50% 75%, #c2185b 75%);}
.gradient79{background-image: radial-gradient( #ff6f00 20%, #1b5e20 20% 40%, #e65100 40% 60%, #c2185b 60% 80%,#00acc1 80%);}

linear-gradient : Color add

gradient68
gradient69
gradient70
gradient71
gradient72
gradient73
gradient74
gradient75
.gradient68{background-image: radial-gradient( #ff6f00, #1b5e20);}
.gradient69{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100);}
.gradient70{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b);}
.gradient71{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1);} 
.gradient72{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c);}
.gradient73{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c,#4e342e);}
.gradient74{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c,#4e342e,#b71c1c);}
.gradient75{background-image: radial-gradient( #ff6f00, #1b5e20, #e65100, #c2185b,#00acc1, #388e3c,#4e342e,#b71c1c,#546e7a );}

linear-gradient : Color add

gradient76
gradient77
gradient78
gradient79
.bac2 >div {border-radius:5px; }                    
.gradient76{background-image: radial-gradient( #ff6f00 50%, #1b5e20 50%);}
.gradient77{background-image: radial-gradient( #ff6f00 33.333%, #1b5e20 33.333% 66.666%, #e65100 66.666%);}
.gradient78{background-image: radial-gradient( #ff6f00 25%, #1b5e20 25% 50%, #e65100 50% 75%, #c2185b 75%);}
.gradient79{background-image: radial-gradient( #ff6f00 20%, #1b5e20 20% 40%, #e65100 40% 60%, #c2185b 60% 80%,#00acc1 80%);}

radial-gradient : ellipse farthest-corner at 방향

gradient80
gradient81
gradient82
gradient83
gradient84
gradient85
gradient86
gradient87
.bac3 >div{border-radius:3px }                  
.gradient80{background-image: radial-gradient(ellipse farthest-corner at center top, #f8bfa4 0%, #f33b4e 100%);}
.gradient81{background-image: radial-gradient(ellipse farthest-corner at left top,  #f8bfa4 0%, #f33b4e 100%);}
.gradient82{background-image: radial-gradient(ellipse farthest-corner at right top,  #f8bfa4 0%, #f33b4e 100%);}
.gradient83{background-image: radial-gradient(ellipse farthest-corner at bottom left, #f8bfa4 0%, #f33b4e 100%);} 
.gradient84{background-image: radial-gradient(ellipse farthest-corner at bottom center, #f8bfa4 0%, #f33b4e 100%);}
.gradient85{background-image: radial-gradient(ellipse farthest-corner at bottom right,  #f8bfa4 0%, #f33b4e 100%);}
.gradient86{background-image: radial-gradient(ellipse farthest-corner at left center,  #f8bfa4 0%, #f33b4e 100%);}
.gradient87{background-image: radial-gradient(ellipse farthest-corner at right center, #f8bfa4 0%, #f33b4e 100%);}

radial-gradient :fixed

gardient88
gardient89
gardient90
gardient91
gardient92
gardient93
gardient94
gardient95
.gardient88 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}
.gardient89 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}
.gardient90 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}
.gardient91 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}
.gardient92 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}
.gardient93 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}
.gardient94 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}
.gardient95 {background: radial-gradient(#FFBC42 0%, #D81159 100%) fixed;}

repeating-linear-gradient

gradient100
gradient101
gradient102
gradient103
.gradient100{background-image: repeating-linear-gradient(45deg, transparent 5px,  transparent 25px, #33691e 10px, #33691e 45px );}
.gradient101{background-image: repeating-linear-gradient(45deg, transparent 10px,  transparent 25px, #33691e 10px, #33691e 45px );}
.gradient102{background-image: repeating-linear-gradient(45deg, transparent 15px,  transparent 25px, #33691e 10px, #33691e 45px );}
.gradient103{background-image: repeating-linear-gradient(45deg, transparent 20px,  transparent 25px, #33691e 10px, #33691e 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-linear-gradient

gradient108
gradient109
gradient110
gradient111
.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);}

epeating-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 Referance

댓글
© 2018 webstoryboy