css3實現網格背景,background-image，background-size

標籤：背景映像   color   logs   ges   images   round   blank   size   percent   

用純css3實現網格背景，應該怎麼做呢？

需要給容器設定background-image,background-size屬性

 .container{            background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), 
　　　　　　　　　　　　　　　　　　linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);            background-size: 10px 10px;            width: 600px;            height: 300px;        }

background-image 屬性為元素設定背景映像。

                              元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。

                              預設地，背景映像位於元素的左上方，並在水平和垂直方向上重複。

background-size   規定背景映像的尺寸

                            一般值為：

background-size: length|percentage|cover|contain;

   length:    設定背景映像的高度和寬度。

                 第一個值設定寬度，第二個值設定高度。

                 如果只設定一個值，則第二個值會被設定為 "auto"。

  percentage:  以父元素的百分比來設定背景映像的寬度和高度。

                       第一個值設定寬度，第二個值設定高度。

                       如果只設定一個值，則第二個值會被設定為 "auto"。

   cover:    把背景映像擴充至足夠大，以使背景映像完全覆蓋背景地區。

                 背景映像的某些部分也許無法顯示在背景定位地區中。

   contain: 把映像映像擴充至最大尺寸，以使其寬度和高度完全適應內容地區。

 

查看示範：http://runjs.cn/detail/gipgr9qh

css3實現網格背景,background-image，background-size