✍ 📁 🙈 🙉 🙊
HTML
window Resize
html 測試 左入右出
html 測試 上入下出
html 測試 單入單出
html 測試 左單右單
顯示具有
CSS background 背景
標籤的文章。
顯示所有文章
顯示具有
CSS background 背景
標籤的文章。
顯示所有文章
CSS background
<h3>CSS background 背景</h3> <div style="margin-top:-30px"> <pre><code> background-image:url("https://xxx.jpg") 呈現一張圖片地址 background-size 圖片尺寸 background-position 圖片呈現位置 background-repeat 圖片重複的效果 background-color 背景顏色 </code></pre></div> <div id="myDIV"> <table border="0" style="font-size : 25px;"> <tbody> <tr><td rowspan="8" style="vertical-align:top" >div { </td><td colspan="3">width: 100% ; </td></tr><tr><td colspan="3">height: 100%; </td></tr><tr><td colspan="3">background-image : url("https://xxx.jpg") ; </td></tr><tr><td>background-size :</td><td id="Bgsize"> </td><td><select id="Swidth" onchange="myDIV.style.backgroundSize = this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-size</OPTION> <option value="contain">contain</OPTION> <option value="cover">cover</OPTION> <option value="auto">auto</OPTION> <option value="100px 100px">100px 100px</OPTION> <option value="200px 200px">200px 200px</OPTION> <option value="200px">200px</OPTION> <option value="100% 100%">100% 100%</OPTION> <option value="80%">80%</OPTION> <option value="500px">500px</OPTION> </SELECT> </td></tr><tr><td> background-position :</td><td id="Bgposition"> </td><td><select id="Swidth" onchange="myDIV.style.backgroundPosition= this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-position</OPTION> <option value="left top">left top</OPTION> <option value="left center">left center</OPTION> <option value="left bottom">left bottom</OPTION> <option value="center top">center top</OPTION> <option value="center center">center center</OPTION> <option value="center bottom">center top</OPTION> <option value="right top">right top</OPTION> <option value="right center">right center</OPTION> <option value="right bottom">right bottom</OPTION> <option value="50% 50%">50% 50%</OPTION> <option value="30% 70%">30% 70%</OPTION> <option value="20px 200px">20px 200px</OPTION> <option value="50px 300px">50px 300px</OPTION> <option value="initial">initial</OPTION> </SELECT> </td></tr><tr><td> background-repeat :</td><td id="Bgrepeat"> </td><td><select id="Swidth" onchange="myDIV.style.backgroundRepeat= this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-repeat</OPTION> <option value="no-repeat">no-repeat</OPTION> <option value="repeat">repeat</OPTION> <option value="repeat-y">repeat-y</OPTION> <option value="repeat-x">repeat-x</OPTION> <option value="space">space</OPTION> <option value="round">round</OPTION> <option value="initial">initial</OPTION> </SELECT> </td></tr><tr><td> background-color :</td><td id="Bgcolor"> </td><td><select id="Swidth" onchange="myDIV.style.backgroundColor = this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-color</OPTION> <option value="red">red</OPTION> <option value="pink">pink</OPTION> <option value="gray">gray</OPTION> <option value="gold">gold</OPTION> </SELECT> </td></tr></tbody></table> </div> <script> elem = document.querySelector('#myDIV'); style = getComputedStyle(elem); function DPcss() { //alert( ); Bgsize.innerHTML =style.backgroundSize + " ;" ; Bgposition.innerHTML =style.backgroundPosition + " ;"; Bgrepeat.innerHTML =style.backgroundRepeat + " ;"; Bgcolor.innerHTML = style.backgroundColor + " ; }" ; } DPcss(); </script> <style> #myDIV { width: 100%; height: 500px; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs6iTSCIg-47MFrCnQwLbFznoiHq42QLNjQxshByKNXjMpg6uLDENjRF4kbMcZlXLI4DA_bcJCYT5KAMwsu0N4Ck6S_qr1ThAkP43Oyl-F0YxVac19E7SN3NTyEtsunyuXzBeLpO30Wv0R/s1600/images.jpg"); /*背景圖案*/ background-size: 100px 100px; /*底圖就會依照區塊的大小,等比縮放到區塊中*/ background-position: center; /*置中*/ background-repeat: no-repeat; /*背景圖案不重複*/ background-color:gray; /*背景的顏色*/ font-size : 25px ; color:black; } #myDIV select { background:rgba(0, 0, 0, 0) ; color:white; width:200px; font-size: 20px} #myDIV option {background-color: rgb(204, 204, 204 , 3);color:black;} #myDIV table {font-size: 20px ;} pre { font-size: 18px; } pre > code { white-space: pre; margin-top: -25px; display: block; } h3 { text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } </style>
預覽
寫程式
還原
LLLLLLLLLLLLLLLLL
<h3>CSS Background Patterns</h3> <pre><code > CSS Background Patterns 簡易單色背景 CSS 語法產生器。 如果你的網站需求是需要一些單色的背景紋理圖案,來避免略顯單調的白色的話, 這個 CSS Background Pattern 網站所提供的服務就非常適合。你只需要決定前景、 背景色、透明度和紋理間的間隔,就可以即時預覽結果,並複製相關的 CSS 程式碼 到你的網站作使用。</code></pre> <style> pre { font-size: 18px; } pre > code { white-space: pre; margin-top: -25px; display: block; } h3 { text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } .divDP { width: 150px; height: 150px; float: left; margin: 10px; font-size:22px; box-shadow: 0 1px 8px #666; } .pattern1 { background-size: 50px 50px; background-color: #0ae; background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); } .pattern2 { background-size: 50px 50px; background-color: #f90; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); } .pattern3 { background-size: 50px 50px; background-color: #c16; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .pattern4 { background-size: 50px 50px; background-color: #ac0; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } .pattern5 { background-size: 50px 50px; background-color: white; background-image: -webkit-linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -webkit-linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: linear-gradient(to top,transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(to left, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) } .pattern6 {color:red; background-color: #eee; background-size: 60px 60px; background-position: 0 0, 30px 30px; background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); } .pattern7 {color:red; background-color: #eee; background-size: 60px 60px; background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); } .pattern8 { background-color: #fff; background-size: 100% 1.2em; background-image: -webkit-linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), -webkit-linear-gradient(#eee .05em, transparent .05em); background-image: linear-gradient(to right, transparent 21px, #abced4 21px, #abced4 23px, transparent 23px), linear-gradient(#eee .05em, transparent .05em); } .pattern9 {color:white; background: -webkit-radial-gradient(circle, white 10%, transparent 10%), -webkit-radial-gradient(circle, white 10%, black 10%) 50px 50px; background: radial-gradient(circle, white 10%, transparent 10%), radial-gradient(circle, white 10%, indigo 10%) 50px 50px; background-size: 100px 100px; } .pattern10{ background: -webkit-radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none; background: radial-gradient(circle at 0% 2%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none; background-size: 20px 20px; } .pattern11 { background-color: #88AA33; background-image: -webkit-radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none; background-image: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(circle at 100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none; background-position: 0 10px, 0 0%, 0 0; background-size: 20px 20px; } .pattern12{ background-color: #330000; background-image: -webkit-radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%), -webkit-radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%), -webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), -webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), -webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), -webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), -webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), -webkit-radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), -webkit-linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%), -webkit-linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%); background-image: radial-gradient(#890000 4%, #5B0000 9%, rgba(102, 0, 0, 0) 9%), radial-gradient(#890000 4%, #5B0000 8%, rgba(102, 0, 0, 0) 10%), radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)), radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%), radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), radial-gradient(rgba(76, 0, 0, 0.7), rgba(102, 0, 0, 0)), linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%), linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, #000000 50%, rgba(102, 0, 0, 0) 70%); background-position: 0 0px, 50px 50px, 50px 0px, 0 50px, 50px 0px, 100px 50px, 0 0px, 50px 50px, 0 0px, 0 0; background-size: 100px 100px; } .pattern13 {color:red; background-color: white; background-image: -webkit-radial-gradient(gold 9px, transparent 10px), -webkit-repeating-radial-gradient(gold 0px, gold 4px, transparent 5px, transparent 20px, gold 21px, gold 25px, transparent 26px, transparent 50px); background-image: radial-gradient(gold 9px, transparent 10px), repeating-radial-gradient(gold 0px, gold 4px, transparent 5px, transparent 20px, gold 21px, gold 25px, transparent 26px, transparent 50px); background-position: 0 0; background-size: 30px 30px, 90px 90px; } .pattern14 {color:red; background-color: lightgray; background-image: -webkit-radial-gradient(black 15%, transparent 16%), -webkit-radial-gradient(black 15%, transparent 16%), -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); background-image: radial-gradient(black 15%, transparent 16%), radial-gradient(black 15%, transparent 16%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%); background-position: 0 0px, 8px 8px, 0 1px, 8px 9px; background-size: 16px 16px; } .pattern15 { background-color: #BB0033; background-image: -webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%), -webkit-radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%); background-image: radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(closest-side circle at 60% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(closest-side circle at 40% 43%, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(closest-side circle at 40% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(closest-side circle at 60% 22%, #DD3355 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(closest-side circle at 50% 35%, #DD3355 30%, rgba(221, 51, 85, 0) 31%); background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px; background-size: 100px 100px; } .pattern16 { background-color: lightgray; background-image: -webkit-repeating-linear-gradient(120deg, rgba(169,169,169,.4), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), -webkit-repeating-linear-gradient(60deg, rgba(169,169,169,.4), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), -webkit-linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), -webkit-linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-image: repeating-linear-gradient(120deg, rgba(169,169,169,.8), rgba(169,169,169,.8) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(169,169,169,.8), rgba(169,169,169,.8) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; } .pattern17 { background-image: -webkit-radial-gradient( circle at 100% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), -webkit-radial-gradient( circle at 0% 50% , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent); background-image: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), radial-gradient( circle at 0% 50%, transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent); background-color: slategray; background-size:75px 100px; background-position: 0 0%, 0 -50px; } .pattern18{color:red; background-color: rgb(0,255,255,0.2); background-image: -webkit-radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), -webkit-radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), -webkit-radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), -webkit-radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), -webkit-radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), -webkit-radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%), -webkit-radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), -webkit-radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%); background-image: radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), radial-gradient(circle at 50% 59%, white 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), radial-gradient(circle at 50% 41%, black 3%, white 4%, white 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%), radial-gradient(circle at 100% 50%, white 16%, rgba(210, 202, 171, 0) 17%), radial-gradient(circle at 0% 50%, black 16%, rgba(54, 78, 39, 0) 17%); background-position: 50px 0px, 50px 0px, 0 50px, 0 50px, 0 0%, 0 0%, 50px 50px, 50px 50px; background-size: 100px 100px; } .pattern19 { background-color: #C8D3A7; background-image: -webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), -webkit-radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%); background-image: radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%), radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%); background-position: 0 0px, 20px 20px; background-size: 40px 40px; } .pattern20 { background-color: #DDEEFF; background-image: -webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), -webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%); background-image: radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%); background-position: 0 0px, 20px 20px; background-size: 40px 40px; } .pattern21 {background-color: #f76; background-image: linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%), linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%), linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%), linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%); background-position: 0em 1em, 0em 1em, 1em 2em, 1em 2em, 2em 1em, 2em 1em, 3em 2em, 3em 2em, 0em 0em, 1em 1em; background-size: 4em 2em, 4em 2em, 4em 2em, 4em 2em, 4em 2em, 4em 2em, 4em 2em, 4em 2em, 2em 2em, 2em 2em; } </style> <div class="divDP pattern1">pattern 1</div> <div class="divDP pattern2">pattern 2</div> <div class="divDP pattern3">pattern 3</div> <div class="divDP pattern4">pattern 4</div> <div class="divDP pattern5">pattern 5</div> <div class="divDP pattern6">pattern 6</div> <div class="divDP pattern7">pattern 7</div> <div class="divDP pattern8">pattern 8</div> <div class="divDP pattern9">pattern 9</div> <div class="divDP pattern10">pattern 10</div> <div class="divDP pattern11">pattern 11</div> <div class="divDP pattern12">pattern 12</div> <div class="divDP pattern13">pattern 13</div> <div class="divDP pattern14">pattern 14</div> <div class="divDP pattern15">pattern 15</div> <div class="divDP pattern16">pattern 16</div> <div class="divDP pattern17">pattern 17</div> <div class="divDP pattern18">pattern 18</div> <div class="divDP pattern19">pattern 19</div> <div class="divDP pattern20">pattern 20</div> <div class="divDP pattern21">pattern 21</div>
預覽
寫程式
還原
LLLLLLLLLLLLLLLLL
Edit
#ccs
#HTML
#background-image:url
#background-size
#background-position
#background-repeat
#background-color
#Background Patterns
#ccs background
較舊的文章
首頁
訂閱:
文章 (Atom)