CSS:設定元素背景
設定元素背景一共分為兩類,一類是設定元素背景顏色,一類是設定元素背景圖片。
1、設定元素背景顏色
元素背景顏色通過background-color屬性為元素設定背景色。這個屬性接受任何合法的顏色值。該屬性可以為所有元素設定背景色,比如body,以及em這類行內元素。
background-color無法被繼承,如果不設定顏色,它預設為transparent,即透明背景色。如果該元素有父元素,那麼該元素會顯示父元素的背景。
語法示例:
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> css背景</title> </head> <style> body{ background-color:black; } </style> <body> </body> </html>
效果圖如下:
2、設定元素的背景圖片
元素背景圖片通過background-image屬性來為元素設定背景圖片。該屬性預設值為none,即無背景影象。
語法例項:
body {background-image: url(大海.png);}
背景圖片一般是運用在body上,但它的作用範圍不侷限於body。它也可以對一個段落,或者一個小的div設定背景圖片。如下圖:
不過,在為元素設定圖片背景的時候,需要注意圖片的顯示方式,比如平鋪,重複。
屬性值 repeat 導致影象在水平垂直方向上都平鋪,就像以往背景影象的通常做法一樣。repeat-x 和 repeat-y 分別導致影象只在水平或垂直方向上重複,no-repeat 則不允許影象在任何方向上平鋪。
如果想要圖片在元素進行居中放置等位置定位,可以用位置關鍵字(center、top、bottom、right、left)來進行調整,此外,也可以用百分數值來對圖片位置進行設定。
background-position:50% 50%;
上面的語句可以使影象的中心與其所在元素的中心對齊。但如果只提供一個百分數值,所提供的這個值將用作水平值。此外,background-position 的預設值是 0% 0%,在功能上相當於 top left。這就是背景影象總是從元素內邊距區的左上角開始平鋪的原因。
當然了,
如果文件比較長,那麼當文件向下滾動時,背景影象也會隨之滾動。當文件滾動到超過影象的位置時,影象就會消失。
可以通過 background-attachment 屬性防止這種滾動。通過這個屬性,可以宣告影象相對於可視區是固定的(fixed),因此不會受到滾動的影響。