1. 程式人生 > >css3實現網格背景,background-image,background-size

css3實現網格背景,background-image,background-size

mage cover .cn 技術 尺寸 查看 height tag 背景圖像

技術分享

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

查看演示:http://runjs.cn/detail/gipgr9qh

css3實現網格背景,background-image,background-size