首頁 > web前端 > css教學 > 主體

最全的CSS中background標籤匯總

小云云
發布: 2017-12-22 17:09:47
原創
1988 人瀏覽過

在css開發中我們常會用到background,本文主要為大家帶來一篇CSS background全部匯總。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考,希望能幫助大家。

所有背景屬性都不能繼承。

1. background-color

所有元素都能設定背景顏色。

background-color的預設值是transparent;也就是說,如果一個元素沒有指定背景顏色,那麼背景就是透明的,這樣其祖先元素的背景才能可見。

2. background-image

所有元素都能設定背景圖像;

背景圖像可以設定多個,中間用逗號隔開;背景圖像會層疊,寫在前面的層次在上面。

3. background-repeat

repeat(預設)/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll(預設)/fixed
 
5. background-position

#像素法:以影像左上角為起點,第一個值為水平移動的距離,第二個值為垂直移動的距離;若只規定一個值,第二個值預設為50%。

百分比法:百分比同時應用於影像和元素,對應的點重合進行定位。如果只指定一個百分數,表示垂直方向為50%。

關鍵字法:top、right、bottom、left、center進行組合定位;只規定一個值,第二個值預設為center。

注意:background-position可以為負值。

在預設情況下,背景顏色延伸到邊框下面,背景圖像在padding區域的左上角。

6. background-size

設定背景圖片的尺寸;預設值為auto。

像素法:第一個值設定寬度,第二個值設定高度;若只有一個值,第二個值為auto。

百分比法:以父元素的寬度和高度以基準來計算。

關鍵字cover,不改變影像寬高比例,在水平和垂直方向都鋪滿整個元素,有可能導致一部分影像溢出。

關鍵字contain,不改變影像寬高比例,盡可能拉伸,直到某一方向鋪滿整個元素,有可能導致另一方向沒有鋪滿。

7. background-origin

定義背景圖像的初始位置

border-box,邊框左上角。

padding-box,padding區域左上角;預設值。

content-box,內容區左上角。

8. background-clip

The CSS3 background-clip property specifies the painting area of​​ the background.

The property takes three different values:

##The property takes three different values:

# •border-box - (default) the background is painted to the outside edge of the border

•padding-box - the background is painted to the outside edge of the padding

#content- box - the background is painted within the content box

(英文的解釋得比較清楚)

(英文都是從W3Schools Online搬運)

#關於background -origin和background-clip,它們是相互獨立的,互不干擾。

關於background的CSS寫法,個人認為應該邏輯明確、層次分明;具體而言:

background定義背景圖像,background-color定義背景顏色,background-clip定義背景顯示區域。

(個人見解,僅供參考)

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times .

The requirements are as follows:

• Fill the entire page with the image (no white space)

• Scale image as needed

• Center image on page

• Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

    CSS Code複製內容到剪貼簿
  1. #html {   
  2.      background: url(img_flower.jpg) no-repeat center fixed;    
  3. ##卷

    # }  
  4. 小tips:
利用背景影像的水平平鋪,實現波浪式的邊框效果。

(目前只有想法,還沒找到符合需求的圖片。)

相關推薦:

css background-attachment屬性基礎介紹

#五種CSS 利用table實作常用佈局的方法

CSS3關於background-size屬性的詳細介紹

#

以上是最全的CSS中background標籤匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板