CSS的背景與精靈圖

來源:互聯網
上載者:User
這次給大家帶來CSS的背景與精靈圖,使用CSS的背景與精靈圖的注意事項有哪些,下面就是實戰案例,一起來看一下。

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

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

取值:

具體單詞 rgb rgba 十六進位

快速鍵:

bc background-color: #fff;

2.如何設定背景圖片?

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

快速鍵:

bi background-image: url();

注意點:

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

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

3.如果網頁上有圖片, 那麼瀏覽器會再次發送請求擷取圖片的資料

3.背景平鋪屬性

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

取值:

repeat 預設, 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪

快速鍵

bgr background-repeat:

應用情境:

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

4.背景定位屬性

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

在CSS中有一個叫做background-position:屬性, 就是專門用於控制背景圖片的位置

2.格式:

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

3.取值

3.1具體的方位名詞
水平方向: left center right
垂直方向: top center bottom

3.2具體的像素
例如: background-position: 100px 200px;
記住一定要寫單位, 也就是一定要寫px
記住具體的像素是可以接收負數的

快速鍵:

bp background-position: 0 0;

注意點:

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

5. 背景屬性縮寫

1.背景屬性縮寫的格式

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

快速鍵:

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

2.注意點:

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

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

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

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

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

格式

background-attachment:scroll;

取值:

scroll 預設值, 會隨著捲軸的滾動而滾動
fixed 不會隨著捲軸的滾動而滾動

快速鍵:

babackground-attachment:;

5. 背景圖片和插入圖片區別?

1.背景圖片和插入圖片區別?

1.1

背景圖片僅僅是一個裝飾, 不會佔用位置 (可以在上面寫其他的標籤及內容)
插入圖片會佔用位置 (不可以在上面寫其他的標籤及內容)

1.2

背景圖片有定位屬性, 所以可以很方便的控製圖片的位置
插入圖片沒有定位屬性, 所有控製圖片的位置不太方便

1.3

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

6. CSS精靈圖

1.什麼是CSS精靈圖

CSS精靈圖是一種映像合成技術

2.CSS精靈圖作用

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

3.如何使用CSS精靈圖

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

.box1{            width: 110px; //設定寬高            height: 143px;            background-position: -560px -216px; //設定xy        }

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

iOS webView怎樣載入HTMLString

html5容易被忽略的小知識

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.