✍ 📁 🙈 🙉 🙊

Google Apps Script 2

<h3>get Google SpreadSheet content</h3>
<div class="DDiv">

<pre>html 程式訪問 google Apps Script，值 data 傳回 google 工作表1 內容，
var <R>appUrl</R> = "我的 google Apps Script 應用程式的網址"。
</pre>

<ol>
<li>  <</span>div id="DP"><</span>/div>
<br>
<br>
<li>  <</span>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><li><</>/script>
<br>
<br>
<li>  <</span>script>
<li>  var <R>appUrl</R> = "https://script.google.com/macros/s/AKfycbz7m55YR3t-WeJUbrNNOgwVehbGqPDhwFy6qHHIrfvLPgKE59EQX33HKNFqlyRvYMsH_A/exec" ;
<br>
<br>
<li>parameter = {dow:'ReadData'    };
<br>
<li>$.get(appUrl, parameter, function(data) {
<li>           $('#DP').text(JSON.stringify(data)) ; 
<li>    }) 
<li>  <</c>/script>
</ol>
 <br><br>
 
傳回 :<br>

parameter = {dow:'ReadData' };
$.get(appUrl, parameter, function(data) {
 $('#DP').text(JSON.stringify(data )) ; 
})
</script>

.DDiv {word-break: break-all; word-wrap: break-word;}
R {color:red}
</style>

pre {font-size: 20px ;}
R   {color:red}
h3  { text-align: center;
      font-size: 30px;
      font-weight: bold;
      text-shadow: 10px 6px 10px grey;
      color: blue; }
</style>

<h3>get Google SpreadSheet content</h3>

<pre>html 程式訪問 google Apps Script，傳回 google 工作表1 內容，
var <R>url</R> = "我的 google Apps Script 應用程式的網址"。
</pre>
<ol>
<li><<c>div id="demo"><<c>/div>

<li><<c>script>
<li><div>var url ="https://script.google.com/macros/s/AKfycbz7m55YR3t-WeJUbrNNOgwVehbGqPDhwFy6qHHIrfvLPgKE59EQX33HKNFqlyRvYMsH_A/exec"
</div><br>
<li> url+= "?dow=ReadData" ;
<li> var xhp = new XMLHttpRequest();
<li> xhp.onload = function() {
<li> demo.innerHTML = xhttp .responseText;  }
<li> xhp.open("GET",url  );
<li> xhp.send();
<li> <<c>/script>
</ol>

<br>

傳回 xhp : <div id="demo"></div>

url+= "?dow=ReadData" ;

var xhp = new XMLHttpRequest();
  xhp.onload = function() {
  //var dd=[] ;

var dd=JSON.parse(xhp.responseText)
  var TxT="";

TxT+= "var dd=JSON.parse(xhp.responseText)";
      TxT+= "<br>dd = " + JSON.stringify(dd) ;
      TxT+= "<br>dd.length = " + dd.length;
      TxT+= "<br>dd[1] = " + dd[1] ;
      TxT+= "<br>dd[1][1] = " + dd[1][1] ;

demo.innerHTML =  TxT;  }

xhp.open("GET",url  );
  xhp.send();

</script>

demo , pre{ font-size: 20px ;}
R   {color:red}
h3  { text-align: center;
      font-size: 30px;
      font-weight: bold;
      text-shadow: 10px 6px 10px grey;
      color: blue; }
</style>

<h3>get Google SpreadSheet content</h3>

<pre>html 程式訪問 google Apps Script，傳回 google 工作表1 內容，
var <R>url</R> = "我的 google Apps Script 應用程式的網址"。
</pre>
<ol>
<li><<c>div id="demo"><<c>/div>

<li><<c>script>
<li><div>var <R>url</R>  ="https://script.google.com/macros/s/AKfycbz7m55YR3t-WeJUbrNNOgwVehbGqPDhwFy6qHHIrfvLPgKE59EQX33HKNFqlyRvYMsH_A/exec"
</div><br>
<li> url+= "?dow=ReadData&A1=2&A2=1&B1=3&B2=3" ;
<li> var xhp = new XMLHttpRequest();
<li> xhp.onload = function() {
<li> demo.innerHTML = xhttp .responseText;  }
<li> xhp.open("GET",url  );
<li> xhp.send();
<li> <<c>/script>
</ol>

<br>

傳回 : <div id="demo"></div>

url+= "?dow=ReadData&A1=2&A2=1&B1=3&B2=3" ;
  var xhp = new XMLHttpRequest();
  xhp.onload = function() {
  demo.innerHTML = xhp .responseText;  }

xhp.open("GET",url  );
  xhp.send();

</script>

demo , pre{ font-size: 20px ;}
R   {color:red}
h3  { text-align: center;
      font-size: 30px;
      font-weight: bold;
      text-shadow: 10px 6px 10px grey;
      color: blue; }
</style>

Edit

#get Google SpreadSheet content #XMLHttpRequest() #blogger #google blogger #google apps script #Google Sheets 為網頁資料庫 #免費資料庫 #doGet(e) #xhp.send() #xhp.open("GET",url ) #JSON.stringify(data) #xhttp .responseText

Google Apps Script 1

<h3>get Google SpreadSheet content</h3>
<table border="1" style="width:100%">
<tbody><tr><td>
<div width="100%"><</c>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><<c>/script>

<br>
var appUrl = "apps script appUrl " ;
<tr><td>

parameter = { }  // 讀取 Google 試算表 資訊
<br>$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP1"></div>

</td></tr><td>

parameter={ dow:'ReadData' } // 讀取 Google 試算表 內容
<br>$.get(appUrl, parameter, function(data) {.......})
<div id="DP2"></div>

</td></tr><td>
// 讀取 Google 試算表 指定位置內容 <br>
parameter = {dow:'ReadData', A1:2 , A2:1 , B1:3 , B2:3} 
<br>$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP3"></div><br>

</td></tr><td>
// 讀取 Google 試算表 指定位置內容 <br>
parameter = {dow:'ReadData', A1:1 , A1:1 , B1:1 , B2:1}  
<br>$.get(appUrl, parameter, function(data) {.......})</pre>
<div id="DP4"></div><br>

</div>

</td></tr></tbody><table>

function IT(){
parameter = { };
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP1.innerHTML= txt; })

parameter = {dow:'ReadData'}; // 讀取所有內容
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP2.innerHTML= txt; })

parameter = {dow:'ReadData',A1:2,A2:1,B1:3,B2:3};
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP3.innerHTML= txt; })

parameter = {dow:'ReadData',A1:1,A2:1,B1:1,B2:1};
$.get(appUrl, parameter, function(data) {
txt = "data = " + JSON.stringify(data ) ;
       DP4.innerHTML= txt; })

}
IT();

</script>
<a  href="https://docs.google.com/spreadsheets/d/1loDC9_v5gdeosEd01_S4x619gCmxZS6SF4uRQLo3rOg/edit#gid=0" target="_blank" title="HTML">HTML Google資料庫20240320</a>

td {font-size: 20px ;}
R   {color:red}
h3  { text-align: center;
      font-size: 30px;
      font-weight: bold;
      text-shadow: 10px 6px 10px grey;
      color: blue; }
</style>

// 清空 Google 試算表內容
function clearALL(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'clearALL'};
$.get(appUrl, parameter, function(data) {DP() }) ;  }

// 加入 Google 試算表 部份內容
// Sdata 加入內容
// Row=2 var Col=2 加入位置
function setValuesALL(){
DP1.innerHTML= UPDOWN.innerHTML;
var Sdata=[['你','好','嗎'],[2,22,222],[3,33,333],[4,44,444]]
 var Row=2 ; var Col=2 ;
parameter = {dow:'setValuesALL' , Sdata:JSON.stringify(Sdata) ,
             Row:Row , Col:Col  };
$.get(appUrl, parameter, function(data) {DP(); }) ;  }

</script>

<h3>Modify Google SpreadSheet content</h3>

<div id="UPDOWN" style="display:none">
<marquee scrollamount="10" style="width:200px" ><b>
....upload....download.... </b></marquee></div>

<table border="1" style="width:100%;">
<tbody><tr><td height="150px">
<button onclick="clearALL()" >清空 Google 試算表內容</button>
<pre>parameter = {dow:'<r>clearALL</r>'}; 
$.get(appUrl, parameter, function(data) {......}) </pre><br>
<tr><td height="150px">
<button onclick="setValuesALL()" >加入 Google 試算表 部份內容</button>
<pre><m> // 加入試算表部份內容放入 Sdata 序列物件</m>
var Sdata=[['你','好','嗎'],[2,22,222],[3,33,333],[4,44,444]]
<m> // Row 及 Col 放入試算表位置,如果Row=0放入試算表最底加新一行   </m>
var Row=2 ; var Col=2 ;
parameter = {dow:'<r>setValuesALL</r>' , Sdata:JSON.stringify(DD) 
             Row:Row , Col:Col  };
$.get(appUrl, parameter, function(data) {.....}) ;</pre>
</td></tr><td>
<div id="DP1"></div> 
</td></tr></tbody><table>

// Google 試算表 刪除列,rowIndex:2 插入列在第二行,numRows:3  合共插入2列
function deleteRows(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'deleteRows' , rowIndex:2 , numRows:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

//Google 試算表 插入多個列,rowIndex:2 刪除列在第二行,numRows:3  刪除插入2列
function insertRows(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'insertRows' , rowIndex:2 , numRows:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

</script>

<h3>Modify Google SpreadSheet content</h3>

<div id="UPDOWN" style="display:none">
<marquee scrollamount="10" style="width:200px" ><b>
....upload....download.... </b></marquee></div>

<table border="1" style="width:100%;">
<tbody><tr><td height="150px">
<button onclick="insertRows()" >Google 試算表 插入列 </button>
<pre>parameter = {dow:'<r>insertRows</r>' , rowIndex:2 , numRows:2} 
$.get(appUrl, parameter, function(data) {......}) </pre><br>
<tr><td height="150px">

<button onclick="deleteRows()" >Google 試算表 刪除多個列</button>
<pre>parameter = {dow:'<r>deleteRows</r>' , rowIndex:2 , numRows:2 };
$.get(appUrl, parameter, function(data) {.....}) ;
<br></pre>
</td></tr><td>
<div id="DP1"></div> 
</td></tr></tbody><table>

// Google 試算表 刪除欄位 [rowIndex:2 刪除第二欄] [numRows:3  合共刪除2欄]
function deleteColumns(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'deleteColumns' , colIndex:2 , numcols:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

//Google 試算表 插入欄位, [colIndex:2 第二行插入欄位] [numcol:2  插入2欄]
function insertColumns(){
DP1.innerHTML= UPDOWN.innerHTML;
parameter = {dow:'insertColumns' , colIndex:2 , numcols:2};
$.get(appUrl, parameter, function(data) {DP() }) ;   }

</script>

<h3>Modify Google SpreadSheet content</h3>

<div id="UPDOWN" style="display:none">
<marquee scrollamount="10" style="width:200px" ><b>
....upload....download.... </b></marquee></div>

<table border="1" style="width:100%;">
<tbody><tr><td height="150px">
<button onclick="insertColumns()" >Google 試算表 插入多欄位 </button>
<pre>parameter = {{dow:'<r>insertColumns</r>' , colIndex:2 , numcols:2} 
$.get(appUrl, parameter, function(data) {......}) </pre><br>
<tr><td height="150px">

<button onclick="deleteColumns()" >Google 試算表 刪除多欄位</button>
<pre>parameter = {dow:'<r>deleteColumns</r>' , colIndex:2 , numcols:2};
$.get(appUrl, parameter, function(data) {data) {.....}) ;
<br></pre>
</td></tr><td>
<div id="DP1"></div> 
</td></tr></tbody><table>

Edit

#get Google SpreadSheet content #Modify Google SpreadSheet content() #blogger #google blogger #google apps script #Google Sheets 為網頁資料庫 #免費資料庫 #setValuesALL() clear() #getRange() #getDataRange() #insertRows()

CK General ledger

<h3 class="h3" >Modify Google SpreadSheet content</h3>

<div id="UPDOWN" style="display:none">
<marquee scrollamount="10" style="width:200px" ><b>
....upload....download.... </b></marquee>	
</div>

<button onclick="Upload() ">upload renew</button>
<div id="DP1"></div> 
<div id="DP2"></div>

parameter = {dow:'ReadData' };
$.get(appUrl, parameter, function(data) {
     alert(JSON.stringify(data)) ; 
     Mdata=data ; DP();})

function DP(){ 
txt = "" ;
txt+= "<table id='table1' >" ;
txt+= "<tbody>"
txt+="<tr class='ColNO'><td> </td>" ;
   for(var ccc=0 ;ccc< Mdata[0].length ;ccc++){
       txt+="<td class='ColNO'>" ;
       txt+= "<select class='SL' " ;
       txt+= "onchange='Cchange(this.value ," + rr + ")    ;"  ;
       txt+= " this.selectedIndex=0 ')>" ;
       txt+= "<option style='display:none;'> </option>"
       txt+= "<option value='insU'> 向左插入行</option>"
       txt+= "<option value='insD'> 向右插入行</option>"
       txt+= "<option value='del'> 刪除本行</option>"
       txt+= "</select></td>" ;  }

for(var rr=0 ;rr < Mdata.length ;rr++){
      txt+= "</tr><tr><td class='RowNO'>" ;
      txt+= "<select class='SL' " ;
      txt+= "onchange='Rchange(this.value ," + rr + ")    ;"  ;
      txt+= " this.selectedIndex=0 ')>" ;
      txt+= "<option style='display:none;'> </option>"
      txt+= "<option value='insU'> 向上插入行</option>"
      txt+= "<option value='insD'> 向下插入行</option>"
      txt+= "<option value='del'> 刪除本行</option>"
      txt+= "</select></td>" ;
        for(var cc=0 ;cc< Mdata[0].length ;cc++){
            txt+= "<td><input type='text' class='INc' value='" ;
            txt+= Mdata[rr][cc] + "' onchange='CH(" ;
            txt+= rr + "," + cc + ", this.value " + ")' > </td>" ; }
}
txt+= "</td></tr></tbody><table>" ;
DP1.innerHTML= txt ; 
DP2.innerHTML= JSON.stringify(Mdata)
}

function Rchange(xx,yy){
var insCno =table1.rows[0].cells.length
Adata = [] ;
Tdata = [] ;
var assno = 0;
for(var cl=0 ; cl < insCno-1 ; cl++){Adata[cl]="new"+cl}

if(xx=="insU"){ //向上插入行
     for(cl=0 ; cl < Mdata.length ; cl++){
         if(yy == cl){ Tdata [cl] = Adata;
                       assno=1 ;
                       Tdata [cl+assno ] = Mdata[cl] ;}
     else{Tdata [cl+assno ] = Mdata[cl] ;  }
     } Mdata =Tdata ;  }

if(xx=="insD"){  // 向下插入行
     for(cl=0 ; cl < Mdata.length ; cl++){
         if(yy == cl){ Tdata [cl+assno ] = Mdata[cl] ;
                       assno=1 ;
                       Tdata [cl+assno] = Adata; }
     else{Tdata [cl+assno ] = Mdata[cl] ;  }
     } Mdata =Tdata ;  }

if(xx=="del"){  // 刪除本行
       for(cl=0 ; cl < Mdata.length-1 ; cl++){
           if(yy == cl){ assno =1} 
                Tdata[cl] = Mdata[cl+assno] ;   
           } Mdata =Tdata ;  }
DP() ;
}

function CH( rr , cc ,vv){
Mdata[rr][cc] = vv ;
DP2.innerHTML= JSON.stringify(Mdata ) ; }

}) ;
}

</script>

Edit

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>

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

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

<h3>CSS Background Patterns</h3>
<pre><code > CSS Background Patterns 簡易單色背景 CSS 語法產生器。
 如果你的網站需求是需要一些單色的背景紋理圖案，來避免略顯單調的白色的話，
 這個 CSS Background Pattern 網站所提供的服務就非常適合。你只需要決定前景、
 背景色、透明度和紋理間的間隔，就可以即時預覽結果，並複製相關的 CSS 程式碼
 到你的網站作使用。</code></pre>

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>

Edit

#ccs #HTML #background-image:url #background-size #background-position #background-repeat #background-color #Background Patterns #ccs background

訂閱：文章 (Atom)

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

Google Apps Script 2

Google Apps Script 1

CK General ledger

CSS background

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

Google Apps Script 2

Google Apps Script 1

CK General ledger

CSS background

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單