✍ 📁 🙈 🙉 🙊 : CSS3 制作背景图

CSS background 背景 https://www.oxxostudio.tw/articles/202008/css-gradient.html

<div style="color: blue; font-size:24px;text-align:center;">
Radial Gradient ellipse 橢圓放射漸層<br>
background:radial-gradient(方式 尺寸 at 位置, 顏色1 位置, 顏色2 位置)</div>    
     
    
    <style>/*  1111  */
    .divDP {
    width: 150px;
    height: 150px;
    float: left;
    margin: 10px;
    font-size:22px;
    box-shadow: 0 1px 8px #666;}
    
.pattern1{width: 100%;height:220px;margin:auto;text-align:center;
        background:radial-gradient(ellipse 50% 50% at center,red,yellow);}

.pattern2{width: 100%;height:220px;margin:auto;text-align:center;
         background:radial-gradient(ellipse at center,
    #f00 0%, #f90 20%,#fe0 40%,#0c6 60%,#09e 80%,#60c 100%);;}

.pattern3{width: 100%;height:220px;margin:auto; 
          background:radial-gradient(ellipse at center,
    #f00 0%, #f00 20%,
    #f90 20%, #f90 40%,
    #fe0 40%, #fe0 60%,
    #0c6 60%, #0c6 80%,
    #09e 80%, #09e 100%);}

.pattern4{width: 100%;height:220px;margin:auto;text-align:center;
         width:400px;  height:220px;
    border-radius:50%;
    background:radial-gradient(ellipse at 35% 25%,
        #fff 0,#ccc 20%,#999 40%,#000 90%,#666 95%,#999 100%);}
.p4t {color:blue;position: absolute;
            top:80%;
            left: 0%; }

</style>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
 <div class="pattern1">
               background:radial-gradient(ellipse 50% 50% at center,red,yellow);
<br>                ellipse 的放射模式，可以直接指定 x 軸與 y 軸的尺寸。</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern2">
          background:radial-gradient(ellipse at center,
    #f00 0%, #f90 20%,#fe0 40%,#0c6 60%,#09e 80%,#60c 100%);<br>
                      指定多種顏色進行漸層效果。</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern3">
<pre>       width:400px;  height:220px;
            border-radius:50%;
            background:radial-gradient(ellipse at 35% 25%,
            #fff 0 , #ccc 20% , #999 40%,
          #000 90% , #666 95% , #999 100%);;
                          同心圓效果。 </pre></div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern4"></div>
      <div class="p4t"><pre>     width:150px;height:150px;border-radius:50%;
       background:radial-gradient(ellipse at 35% 25%,
        #fff 0,#ccc 20%,#999 40%,#000 90%,#666 95%,#999 100%); 
                       <br> 透過漸層色模擬一個立體的橢球。  </pre> </div>
</td></tr></table>

<div style="color: blue; font-size:24px;text-align:center;">
Radial Gradient circle 圓圈放射漸層<br>
background:radial-gradient(方式 尺寸 at 位置, 顏色1 位置, 顏色2 位置)</div>    
     
    
    <style>/*  1111  */
    .divDP {
    width: 150px;
    height: 150px;
    float: left;
    margin: 10px;
    font-size:22px;
    box-shadow: 0 1px 8px #666;}
    
.pattern1{width: 90%;height:150px;margin:auto;text-align:center;
         background:radial-gradient(circle at center,yellow,red);}

.pattern2{width: 90%;height:150px;margin:auto;text-align:center;
         background:radial-gradient(circle at center,yellow 5%,red 10%);}

.pattern3{width: 90%;height:150px;margin:auto; 
          background:radial-gradient(circle at 25%  25%,yellow 5%,orangered 1%, 
                          aqua 10%, lightskyblue 40%,skyblue 95%,
                           dodgerblue 100%);}

.pattern6{width: 90%;height:150px;margin:auto;text-align:center;
         background:radial-gradient(circle closest-side at center,yellow,red);}

.pattern7{width: 90%; height:150px;margin:auto;text-align:center;
          background:radial-gradient(circle farthest-side at center,yellow,red);}

.pattern8{width: 90%;  height:150px;margin:auto;text-align:center;
          background:radial-gradient(circle closest-corner at left,yellow,red);}

.pattern9{width: 90%;  height: 150px;margin:auto;text-align:center;
          background:linear-gradient(45deg, red, yellow);}

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern6">
          background:radial-gradient(circle closest-side at center,yellow,red); 
                       <br> closest-side：圓形 最近邊   </div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern7">
          background:radial-gradient(circle farthest-side at center,yellow,red); 
          <br>farthest-side 圓形 最遠邊   </div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern8">
          background:radial-gradient(circle closest-corner at left,yellow,red); 
                  <br>  closest-corner 圓形 最近角    </div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern9">
          background:radial-gradient(circle farthest-corner at left,yellow,red);<br>
                      圓形 最遠角</div>
</td></tr></table>

一一一一一一一一一一一一一一一一一一一一一一一一一/.;

<div style="color: blue; font-size:30px;text-align:center;">
Radial Linear Gradient 線性漸層<br>
background:linear-gradient(方向, 顏色1 位置, 顏色2 位置)</div>    
     
    
    <style>/*  1111  */
    .divDP {
    width: 150px;
    height: 150px;
    float: left;
    margin: 10px;
    font-size:22px;
    box-shadow: 0 1px 8px #666;}
    
.pattern1{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient( red, yellow);}

.pattern2{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient(to bottom, red, yellow);}

.pattern3{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient(to top, red, yellow);}

.pattern4{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient(0deg, red, yellow);}

.pattern5{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient(45deg, red, yellow);}

.pattern6{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient(to top, red 80%, yellow 100%);}

.pattern7{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient(red, yellow, pink, orange);}

.pattern8{width: 90%;  height: 80px;margin:auto;text-align:center;
          background:linear-gradient(45deg, red, yellow, pink, orange);}

.pattern9{width: 90%; margin:auto;text-align:center;color:white;
          background:linear-gradient(90deg, lime 0%, lime 10%,
                                     orange 15%, orange 25%,
                                     aqua  30%, aqua  40%,
                                     green 45%, green 55%,
                                     blue 60%, blue 70%,
                                   indigo 75%, indigo 85%  );}

</style>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
 <div class="pattern1">
          background:linear-gradient( red, yellow);<br>
                      red 從上 往 下 yellow,進行漸層</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern2">
          background:linear-gradient(to bottom,red, yellow);<br>
                      red 從上 往 下 yellow,進行漸層</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern3">
          background:linear-gradient(to top, red, yellow);<br>
                      red 從下 往 上 yellow,進行漸層</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern4">
          background:linear-gradient( 0deg, red, yellow);<br>
                      red 從下 往 上 yellow,進行漸層</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern5">
          background:linear-gradient( 45deg, red, yellow);<br>
                      red 45deg 從下 往 上 yellow,進行漸層</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern6">
          background:linear-gradient(to top, red 80%, yellow 100%);<br>
                      red 80% 從下 往 上 yellow,進行漸層</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern7">
          background:linear-gradient(red, yellow, pink, orange);<br>
                      沒有設定顏色位置參數，所以顏色平均分配</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern8">
          background:linear-gradient(45deg, red, yellow, pink, orange);<br>
                      沒有設定顏色位置參數，所以顏色平均分配</div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern9">
<pre> background:linear-gradient(90deg, lime 0%, lime 10%,
                            orange 15%, orange 25%,
                            aqua   30%, aqua   40%,
                            green  45%, green  55%,
                            blue   60%, blue   70%,
                            indigo 75%, indigo 85%);
      設定不要重疊每個顏色的位置，才看見邊緣出現漸層的顏色。</pre></div>
</td></tr></table>

<div style="color: blue; font-size:24px;text-align:center;">
Repeating Gradients 重複漸層<br>
透過 background-size 搭配 background-repeat 做到。</div>
<pre style="font-size:20px;">分別是：repeating-radial-gradient：放射重複漸層， 
       repeating-linear-gradient：線性重複漸層， 
       repeating-conic-gradient ：圓錐形重複漸層， </pre> 
    
     
    
<style>
    
.pattern1{width: 100%;height:180px;margin:auto;
         background:repeating-linear-gradient(45deg,ivory 0, ivory 5%, 
                                              bisque 5%, bisque 10%,
                                           cornsilk 10%,cornsilk 15% );}

.pattern2{width: 100%;height:180px;margin:auto;color:white;
         background:repeating-radial-gradient(circle, 
      #000 0, #000 5%, 
      #f90 5%, #f90 10%,
      #a50 18%);}

.pattern3{width: 100%;height:180px;margin:auto; 
          background:repeating-conic-gradient(#f00 0, #f00 15deg, #fa0 15deg,
                                              #fa0 30deg  );}

.pattern4{width: 100%;height:180px;margin:auto;
          background:repeating-conic-gradient( khaki 0, khaki 90deg,
                                               aqua 90deg, aqua 180deg);
                                               background-size:10% 20% ;}

</style>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
 <div class="pattern1">
<pre>background:repeating-linear-gradient(45deg,ivory 0, ivory 5%, 
                                  bisque 5%, bisque 10%,
                                  cornsilk 10%, cornsilk 15% );</pre></div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern2">
<pre>background:repeating-radial-gradient(circle, #000 0, #000 5%, 
                                       #f90 5%, #f90 10%,
                                       #a50 18%);</pre></div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern3">
<pre>background:repeating-conic-gradient(#f00 0, #f00 15deg,
                                    #fa0 15deg,  #fa0 30deg  ); </pre></div>
</td></tr></table>

<table border="1" style="font-size:22px;width: 100% ;">
<tr><td>  
<div class="pattern4">
<pre>background:repeating-conic-gradient( khaki 0, khaki 90deg,
                                   aqua 90deg, aqua 180deg);
                                   background-size:10% 20% </pre></div>
</td></tr></table>

#html #CSS #CSS3 制作背景图 #Repeating Gradients 重複漸層 #repeating radial gradient 放射重複漸層 #repeating linear gradient 線性重複漸層 #CSS background 背景 #repeating conic gradient 圓錐形重複漸層

<style>

.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>
background pattern<br>
    <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>

</style>

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

function DPcss() { //alert( );
Bgsize.innerHTML =style.backgroundSize + " ;" ;
Bgposition.innerHTML =style.backgroundPosition + " ;";
Bgrepeat.innerHTML =style.backgroundRepeat + " ;";
Bgcolor.innerHTML = style.backgroundColor + " ; }" ;
}
DPcss();
</script>

Edit

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單