13-CSS基礎-背景和精靈圖

 

---

背景相關屬性

背景顏色

• 如何設定標籤的背景顏色?
• 在CSS中可以通過background-color:屬性設定標籤的背景顏色
• 取值:
• 具體單詞
• rgb
• rgba
• 十六進位制
• 格式:

<style>

  div{

            width: 100px;

            height

: 50px;

        }

  .box1{

            background-color: red;

        }

        .box2{

            background-color

: rgb(0,255,0);

        }

        .box3{

            background-color: rgba(0,0,255,0.7);

        }

        .box4

{

            background-color: #0ff;

        }

</style>

• 快捷鍵:
• bc background-color: #fff;

背景圖片

• 如何設定背景圖片?
• 在CSS可以通過background-image: url();設定背景圖片
• 格式:

<style>

        div{

            width: 500px;

            height: 500px;

        }

        .box1{

            background-image: url(images/girl.jpg);

            /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/

        }

</style>

<div class="box1"></div>

• 注意點:
• 圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網路的地址
• 如果圖片的大小沒有標籤的大小大, 那麼會自動在水平和垂直方向平鋪來填充
• 如果網頁上出現了圖片, 那麼瀏覽器會再次傳送請求獲取圖片
• 快捷鍵:
• bi background-image: url();

背景平鋪

• 如何控制背景圖片的平鋪方式?
• 在CSS中可以通過background-repeat屬性控制背景圖片的平鋪方式的
• 取值:
• repeat 預設, 在水平和垂直都需要平鋪
• no-repeat 在水平和垂直都不需要平鋪
• repeat-x 只在水平方向平鋪
• repeat-y 只在垂直方向平鋪
• 格式:

<style>

        /*

        div{

            width: 500px;

            height: 500px;

        }

        .box1{

         background-color: red;

            background-image: url(images/girl.jpg);

            background-repeat: repeat-y;

        }

</style>

<div class="box1"></div>

• 應用場景:
• 可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度
• 可以將多張圖片拼接成一張圖片
• 注意點:
• 背景顏色和背景圖片可以共存, 圖片會覆蓋顏色
• 快捷鍵
• bgr background-repeat:

背景定位

• 如何控制背景圖片的位置?
  在CSS中有一個叫做background-position:屬性, 就是專門用於控制背景圖片的位置
• 格式:
  background-position: 水平方向 垂直方向;
• 取值:
• 具體的方位名詞
• 水平方向: left center right
• 垂直方向: top center bottom

<style>

        div{

            /*width: 500px;*/

            height: 500px;

        }

        .box1{

            background-color: red;

            background-image: url(images/girl.jpg);

            background-repeat: no-repeat;

            /*background-position: left top;*/

            /*background-position: right top;*/

            /*background-position: right bottom;*/

            /*background-position: left bottom;*/

            /*background-position: center center;*/

            /*background-position: left center;*/

            background-position: center top;

        }

</style>

 

<div class="box1"></div>

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

<style>

        div{

            /*width: 500px;*/

            height: 500px;

        }

        .box1{

            background-color: red;

            background-image: url(images/girl.jpg);

            background-repeat: no-repeat;

            /*background-position: 100px 0;*/

            /*background-position: 100px 200px;*/

            background-position: -100px -100px;

        }

</style>

• 應用場景:
• 當圖片比較大的時候, 可以通過定位屬性保證圖片永遠居中顯示
• 快捷鍵:
• bp background-position: 0 0;
•  

背景屬性連寫

• 和font屬性一樣, background屬性也可以連寫
• 背景屬性縮寫的格式
• background: 背景顏色 背景圖片 平鋪方式 關聯方式 定位方式;
• 注意點：
• background屬性中， 任何一個屬性都可以被省略
• 快捷鍵:
• bg+ background: #fff url() 0 0 no-repeat;

背景關聯

• 什麼是背景關聯方式？
• 預設情況下背景圖片會隨著滾動條的滾動而滾動， 如果不想讓背景圖片隨著滾動條的滾動而滾動， 那麼我們就可以修改背景圖片和滾動條的關聯方式
• 如何修改背景關聯方式？
• 在CSS中有一個叫做background-attachment的屬性， 這個屬性就是專門用於修改關聯方式的
• 格式
• background-attachment：scroll;
• 取值：
• scroll 預設值， 會隨著滾動條的滾動而滾動
• fixed 不會隨著滾動條的滾動而滾動
• 快捷鍵:
• ba background-attachment:;

插入圖片和背景圖片的區別

• 1
• 背景圖片僅僅是一個裝飾, 不會佔用位置
• 插入圖片會佔用位置
• 2
• 背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
• 插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
• 3
• 插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜尋引擎收錄, 那麼推薦使用插入圖片

css精靈

• 什麼是CSS精靈圖
• CSS精靈圖是一種影象合成技術, 全稱CSS Sprite
• CSS精靈圖作用
• 可以減少請求的次數, 以及可以降低伺服器處理壓力
• 如何使用CSS精靈圖
• CSS的精靈圖需要配合背景圖片和背景定位來使用
• 示例

    <style>

        .box{

            width: 86px;

            height: 28px;

            background-image: url(images/weibo.png);

            background-position: -425px -200px;

        }

    </style>

    <div class="box"></div>

• 完整圖片

 

• 顯示的圖片