Background其他屬性

2021-10-10 04:12:37 字數 1425 閱讀 5090

屬性

描述css

background

在乙個宣告中設定所有的背景屬性。

1background-attachment

設定背景影象是否固定或者隨著頁面的其餘部分滾動。

1background-color

設定元素的背景顏色。

1background-image

設定元素的背景影象。

1background-position

設定背景影象的開始位置。

1background-repeat

設定是否及如何重複背景影象。

1background-clip

規定背景的繪製區域。

3background-origin

規定背景的定位區域。

3background-size

規定背景的尺寸。

3背景屬性(background-position)

作用設定背景影象的起始位置

格式background-position: 水平方向 垂直方向;

取值1.具體的方位名詞

水平方向:left center right

垂直方向:top center bottom

2.具體的畫素。

100px 200px(距離左邊界100畫素,距離上邊界200px)

-100px -200px(超出左邊界100畫素,超出上邊界200px)

這裡就需要知道其實就是我們數學中的xy軸,不過是y軸的正負方向反轉。向下為y軸正方向,x軸正方向不變。

注意點

1.同乙個標籤可以同時設定背景顏色和背景如果,如果同時存在,部分會覆蓋背景顏色。

2.一定要寫具體單位px,可以接受負數.

關聯方式(background-attachment)

什麼是背景和滾動條關聯方式

預設情況下我們設定背景,如果介面過長,旁邊會有滾動條,背景會隨著頁面滾動而滾動,如果我們不想讓其滾動就可以修改和滾動條關聯方式

取值scroll 預設值會隨著滾動條滾動而滾動

fixed 不會隨著滾動條滾動而滾動

背景屬性縮寫

格式background: 背景顏色 背景 平鋪方式 關聯方式 定位方式;

注意點background縮寫時任何乙個屬性都可以被省略。

插入和背景的區別

1.背景不會占用位置,如果裡邊有文字只會顯示上,不會另起一行,插入占用位置。

2.背景有定位屬性,可以隨意改變位置,插入沒有定位屬性。

3.插入比背景語義強,如果想要被搜尋引擎找到,就使用插入。

background屬性快捷鍵:bg+然後按下table生成如下連寫

background: #fff url() 0 0 no-repeat;(0 0是定位)

background簡寫屬性

在css中有多個屬性用於設定背景樣式,其中 background color 設定背景顏色。background repeat 設定是否以及如何重複背景影象 background position 設定背景影象的起始位置 background attachment 設定背景影象是否固定或者隨著頁面的...

background相關屬性

background origin 規定 background position 屬性相對於容器的哪一部分來定位。padding box 背景影象相對於內邊距框來定位 預設 border box背景影象相對於邊框盒來定位 content box背景影象相對於內容框來定位。background pos...

背景(background)屬性

background 背景屬性 background attachment 背景影象是否固定或者隨著頁面的其餘部分滾動background color 設定背景顏色 color 指定背景顏色 transparent 預設。背景顏色透明 inherit 從父元素繼承 url 影象路徑 none 預設。...