淺談background的用法


div css 背景樣式background屬性

 

一、語法及參數

 

1、語法:
background : background-color(顏色) || background-image(圖片地址) || background-repeat(平鋪方式) || background-attachment(固定方式) || background-position(定位大小)

2、background參數:
background屬性是復合屬性。通俗說background后值可以設置為多值,包括背景顏色,背景圖片等等,以及位置和平鋪方式的更改等等。

 

二、background寫法

 

1、整體寫

background:url(圖片地址) no-repeat 20px 20px;

2分開寫

就需要用到background-image:url(圖片地址);background-repeat(平鋪方式)  background-position(定位)

 

三、background詳解分析

 

css background背景樣式結構分析  

上面(二)中的css進行一個詳細的說明

     1>url我就不說了沒什么可以說的

     2>平鋪方式

         repeat:默認的,背景圖像將在垂直方向和水平方向重復。

         repeat-x:背景圖像將在水平方向重復,當然y的話就是垂直了

         no-repeat:圖片顯示一次

         inherit:簡單來說的話就是繼承父元素的

     3>定位

        上面的20px 20px分別代表的意思是 --------->距左邊20px,距上邊20px

        接下來第一個20px的位置實際上有三個屬性left right center   圖片靠左開始顯示  靠右 水平居中

        第二個20px位置也有三個屬性top bottom center  圖片靠上開始顯示  靠下 垂直居中

 

四、設置背景顏色

 

1、背景顏色設置實例CSS代碼

      background:red設置背景顏色為紅色

2、承接上面的代碼我們可以如下操作

     background:red url(圖片地址) no-repeat 20px 20px;

     這段css代碼和上面差不多,唯一多的地方就是背景圖片顯示不到的地方就是用紅色代替。

 

五、background教程總結

     這個背景看起來還是有那么一點點的復雜,但是只要沉下心來慢慢去學習就會覺得這個就那樣,因此好好去學習下,載我們以后遇見復雜的網頁時,運用這些知識就會是得心應手了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM