目錄

• 效果圖
• 參數(shù)
• CSS代碼塊

效果圖

參數(shù)

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。