CSS背景屬性

2021-10-01 07:55:38 字數 2309 閱讀 9376

1.如何設定標籤的背景顏色?

在css中有乙個**background-color:**屬性, 就是專門用來設定標籤的背景顏色的

取值:具體單詞

rgbrgba

十六進製制

快捷鍵:

bc background-color: #fff;

1.如何設定背景?

在css中有乙個叫做background-image: url();的屬性, 就是專門用於設定背景的

快捷鍵:

bi background-image: url();

注意點:

1.的位址必須放在url()中, 的位址可以是本地的位址, 也可以是網路的位址

2.如果的大小沒有標籤的大小大, 那麼會自動在水平和垂直方向平鋪來填充

3.如果網頁上出現了, 那麼瀏覽器會再次傳送請求獲取

.box1
1.如何控制背景的平鋪方式?

在css中有乙個background-repeat屬性, 就是專門用於控制背景的平鋪方式的

取值:repeat 預設, 在水平和垂直都需要平鋪

no-repeat 在水平和垂直都不需要平鋪

repeat-x 只在水平方向平鋪

repeat-y 只在垂直方向平鋪

快捷鍵bgr background-repeat:

應用場景:

可以通過背景的平鋪來降低的大小, 提公升網頁的訪問速度

1.如何控制背景的位置?

在css中有乙個叫做**background-position:**屬性, 就是專門用於控制背景的位置空間

2.格式:

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

3.取值

2.1具體的方位名詞

水平方向: left center right

垂直方向: top center bottom

2.2具體的畫素

例如: background-position: 100px 200px;

記住一定要寫單位, 也就是一定要寫px

記住具體的畫素是可以接收負數的

快捷鍵:

bp background-position: 0 0;

注意點:

同乙個標籤可以同時設定背景顏色和背景, 如果顏色和同時存在, 那麼會覆蓋顏色

1.背景屬性縮寫的格式

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

快捷鍵:

bg+ background: #fff url() 0 0 no-repeat;

2.注意點:

background屬性中, 任何乙個屬性都可以被省略

3.什麼是背景關聯方式?

預設情況下背景會隨著滾動條的滾動而滾動, 如果不想讓背景隨著滾動條的滾動而滾動, 那麼我們就可以修改背景和滾動條的關聯方式

4.如何修改背景關聯方式?

在css中有乙個叫做background-attachment的屬性, 這個屬性就是專門用於修改關聯方式的

格式background-attachment:scroll;

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

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

快捷鍵:

ba background-attachment:;

1.背景和插入區別?

1.1背景僅僅是乙個裝飾, 不會占用位置

插入會占用位置

1.2背景有定位屬性, 所以可以很方便的控制的位置

插入沒有定位屬性, 所有控制的位置不太方便

1.3插入語義比背景的語義要強,所以在企業開發中如果你的想被搜尋引擎收錄, 那麼推薦使用插入

1.什麼是css精靈圖

css精靈圖是一種影象合成技術

2.css精靈圖作用

可以減少請求的次數, 以及可以降低伺服器處理壓力

3.如何使用css精靈圖

css的精靈圖需要配合背景和背景定位來使用

CSS背景屬性

背景顏色屬性 background color 這個屬性為html元素設定背景顏色,相當於html中bgcolor屬性。body 上面的 表示body這個html元素的背景顏色是翠綠色的。背景屬性 background image 這個屬性為html元素設定背景,相當於html中background...

CSS背景屬性

一 背景顏色 屬性 background color 取值 任何合法顏色或者transparent 注意 背景顏色會填充到元素的內容區域以及邊框區域 二 背景影象 作用 以圖象作為元素的背景 屬性 background image 取值 url 背景影象路徑 三 背景重複 屬性 background...

css背景屬性

css背景屬性 目錄 background attachment背景附件 設定背景影象是否固定或者隨著頁面的其餘部分滾動 background clip背景修剪 規定背景的繪製區域 background origin背景 規定 background position 屬性相對於什麼位置來定位 bac...