這篇文章主要為大家展示了“CSS3中的網格背景應該如何實現”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS3中的網格背景應該如何實現”這篇文章吧。

　　用純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: 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。

總結

以上是生活随笔為你收集整理的CSS3中的网格背景应该如何实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。