溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“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中的網格背景應該如何實現”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
