背景相關屬性

背景顏色

• 如何設置標簽的背景顏色?

• 在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>

• 完整圖片

  
  

• 顯示的圖片

  
  

學習交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038