CSS中bground是很重要的一個屬性,它能夠讓我們設置一個元素的背景圖片。
background-image: url("image.jpg");
在這段代碼中,我們使用了background-image屬性來設置元素的背景圖片,url()括號里是你所需要引用的圖片的地址。
我們還可以使用background-repeat屬性來設置背景圖片是否重復,它有以下幾種取值:
background-repeat: no-repeat; /*不重復*/ background-repeat: repeat-x; /*水平方向重復*/ background-repeat: repeat-y; /*豎直方向重復*/ background-repeat: repeat; /*水平和豎直方向都重復*/
除了設置背景圖片是否重復,我們還可以使用background-position屬性來設置背景圖片的位置:
background-position: center; /*圖片居中*/ background-position: left top; /*圖片左上*/ background-position: right bottom; /*圖片右下*/ background-position: 10px 20px; /*圖片離左邊和上邊都有10px的距離*/
使用background-size屬性可以設置背景圖片的大小,它有以下幾種取值:
background-size: cover; /*圖片鋪滿整個元素且不變形*/ background-size: contain; /*保持圖片原始比例鋪滿整個元素*/ background-size: 100px 200px; /*設置圖片寬高*/
除了以上屬性外,我們還可以通過background-color屬性為元素設置背景顏色,它接受一個CSS顏色值,如:
background-color: #fff; background-color: rgba(0,0,0,0.5); background-color: red;
總體而言,CSS中bground屬性是十分重要的,它可以插入一個圖片來使網頁更好看,更有風格。通過控制背景圖片的位置和大小以及設置背景顏色,我們可以創造出獨特而豐富的設計。
上一篇css body 漸變
下一篇css body什么意思