目錄

• 效果圖
• 參數
• CSS代碼塊

效果圖

參數

• 利用偽元素after來實現網格線圖層
• background-image：設置線性漸變linear-gradient
• 第一個是實現橫向的網格線，第二個是實現縱向網格線
• 參數一表示漸變線相較于水平線的角度，0deg表示漸變從下往上，90表示從左往右
• 接下來的四個參數表示在距離起始點多少px位置的中心線的顏色
• 0px或者可以設置0%的位置到1px或者設置其他百分比的位置都是黑色，接著從1px到終點都是透明色，這樣可以畫出一條1px的線
• background-size設置每一個網格的大小，默認重復平鋪
• z-index：設置圖層的層級，設置-1，讓頁面其他元素在他的上面

CSS代碼塊

body::after {position: fixed;top: 0;left: 0;content: '';width: 100%;height: 100%;background-image: linear-gradient(0deg,black 0px,black 1px,transparent 1px,transparent 100px),linear-gradient(90deg,black 0px,black 1px,transparent 1px,transparent 100px);background-size: 50px 50px;opacity: 0.1;z-index: -1; }

總結

以上是生活随笔為你收集整理的CSS实现背景网格线（background-image）的全部內容，希望文章能夠幫你解決所遇到的問題。

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