『壹』 css讓背景圖片拉伸填充的屬性
比如一個容器(body,div,span)中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。
所以實際的結果是只能重復顯示,所以出現了repeat,repeat-x,repeat-y,no-repeat這些屬性。就是用來
控制背景圖片的顯示的。所以一般用作背景圖片的有2類:
1.是一整張大圖,尺寸和區域大小剛好吻合
2.一個很小的條狀圖,通過repeat後,形成一個很規則的大圖背景。
但是css3出現以後,這個情況被改善了。background-size
屬性可以讓我們之前的希望成真。
而且這個屬性在firefox,chrome,以及ie9上都可以使用。
具體使用方法如下:
背景圖尺寸(數值表示方式):
#background-size{
background-size:200px
100px;
}背景圖尺寸(百分比表示方式):
#background-size2{
background-size:30%
60%;
}背景圖尺寸(等比擴展圖片來填滿元素,即cover值):
#background-size3{
background-size:cover;
}背景圖尺寸(等比縮小圖片來適應元素的尺寸,即contain值):
#background-size4{
background-size:contain;
}背景圖尺寸(以圖片自身大小來填充元素,即auto值):
#background-size5{
background-size:auto;
}
『貳』 css用於控制網頁的背景圖片的屬性正確的是
用css設置網頁中的背景圖片,主要有如下幾個屬性:
1,背景顏色 {">說明:參數取值和顏色屬性一樣注意:在HTML當中,要為某個對象加上背景色只有一種辦法,那就是先做一個表格,在表格中設置完背景色,再把對象放進單元格。這樣做比較麻煩,不但代碼較多,還要為表格的大小和定位傷些腦筋。現在用CSS就可以輕松地直接搞定了,而且對象的范圍很廣,可以是一段文字,也可以只是一個單詞或一個字母。例子:給部分文字加背景顏色給部分文字加背景顏色表格背影顏色:
代碼示例:
style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">
2.背景圖片:background-image
語法:{background-image: url(URL)|none}說明: URL就是背景圖片的存放路徑。如果用「none」來代替背景圖片的存放路徑,將什麼也不顯示。例子:給部分文字加背景圖片
代碼示例:
.imgbgstyle { background-image: url(logo.gif)}
3.背景重復:background-repeat
語法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}作用:背景圖片重復控制的是背景圖片平鋪與否,也就是說,結合背景定位的控制可以在網頁上的某處單獨顯示一幅背景圖片
說明:參數取值范圍:
·inherit 繼承·no-repeat 不重復平鋪背景圖片·repeat·repeat-x 使圖片只在水平方向上平鋪·repeat-y 使圖片只在垂直方向上平鋪
注意:如果不指定背景圖片重復屬性,瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。
4.背景固定:background-attachment
語法:{background-attachment:fixed|scroll}說明:參數取值范圍
·fixed:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,固定不動·scroll:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,一起滾動
注意:背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性,瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時傷害瀏覽者的視力,所以可以解除背景圖片和文字內容的捆綁,該為和瀏覽器窗口捆綁。
例子:使背景圖案不隨文字「滾動」的CSS
代碼示例:
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5.背景定位:background-position
語法:{background-position:數值|top|bottom|left|right|center}作用:背景定位用於控制背景圖片在網頁中顯示的位置。說明:參數取值范圍
·帶長度單位的數字參數·top:相對前景對象頂對齊·bottom:相對前景對象底對齊·left:相對前景對象左對齊·right:相對前景對象右對齊·center:相對前景對象中心對齊
·比例關系
關鍵字解釋:top left = left top = 0% 0%
『叄』 css文件 如何使背景圖片大小適應div的大小
需要准備的材料分別有:電腦、瀏覽器、html編輯器。
1、首先,打開html編輯器,新建html文件,例如:index.html。