CSS格子背景圖是一種常用的設計元素,可以用于網站的背景、導航欄、按鈕等等。我們可以使用CSS的background-image屬性和background-size屬性實現這種效果。
.grid-background { background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px); background-size: 20px 20px; }
上面的代碼中,我們使用了兩個線性漸變背景圖片,其中一個是垂直方向的,一個是水平方向的。我們設置了每個格子的寬度和高度均為20px,并使用背景顏色的rgba值來達到透明度效果。
可以根據需要調整格子的大小和顏色,以達到最佳的設計效果。
最終效果如下:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo risus eget purus dignissim, nec maximus lacus suscipit. Sed semper euismod tortor sed rhoncus. Proin non ante malesuada, hendrerit eros eget, iaculis ipsum. Nullam nec lobortis mauris. Praesent quis dignissim turpis. Proin nec massa ac sem dictum ultricies non auctor turpis. Maecenas eu enim nec risus tristique blandit. Duis non risus eu est tincidunt hendrerit. Fusce ut magna id ex ullamcorper faucibus eu nec tortor.