第十三章 CSS背景和精靈圖

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>背景和精靈圖</title>
    <style media="screen">
      /*div{
        width: 300px;
        height: 200px;
      }
      .box1{
        background-color: red;
      }
      .box2{
        background-color: rgb(0,255,0);
      }
      .box3{
        background-color: rgba(0,0,255,0.3);
      }
      .box4{
        background-color: #0ff;
      }*/

      /*div{
        width: 500px;
        height: 500px;
      }
      .box1{
        background-image: url(../HTML5/0.gif);
      }
      .box2{
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506490622726&di=c96e3debb0862f56b6176b4051d10e03&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd62a6059252dd42a4bb6d14f093b5bb5c8eab893.jpg);
      }*/

      /*body{
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506491924619&di=2d1783c589c74fc112fe1b10432c4826&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F11%2F03%2F23%2F95f58PICXu2.jpg);
        background-repeat: repeat;
      }*/

      /*div{
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(../HTML5/0.gif);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-position: 100px 20px;
        background-position: -20px -20px;
      }*/

      /*div{
        height: 500px;
        background-color: red;
        background-image: url(http://img05.tooopen.com/images/20150625/tooopen_sy_131776287347.jpg);
        background-repeat: no-repeat;
        background-position: center  top;
      }*/

      /*body{
        background: red url(http://img05.tooopen.com/images/20150625/tooopen_sy_131776287347.jpg) no-repeat fixed center top;
        background: red url(http://img05.tooopen.com/images/20150625/tooopen_sy_131776287347.jpg) no-repeat scroll center top;
      }*/

      /*.box1{
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(../HTML5/0.gif);
        background-position: right bottom;
        background-repeat: no-repeat;
      }
      .box2{
        width: 500px;
        height: 500px;
        background-color: red;
      }*/

      /*.box1{
        width: 500px;
        height: 500px;
        background-image: url(../HTML5/0.gif);
        background-position: right bottom;
      }
      .box2{
        width: 500px;
        height: 500px;
        background-image: url(../HTML5/0.gif);
        background-position: center top;
        background-repeat: no-repeat;
      }*/

      div{
        width: 100px;
        height: 100px;
        background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506505932259&di=c89811b24ff5f10951987a291ad624fb&imgtype=0&src=http%3A%2F%2Fpic1.cxtuku.com%2F00%2F02%2F13%2Fb494fb44003c.jpg);
        display: inline-block;
      }
      .box1{
        background-position: -300px -160px;
      }
      .box2{
        background-position: -160px -160px;
      }

    </style>
  </head>
  <body>

    <!-- <div class="box1">

    </div>
    <div class="box2">

    </div>
    <div class="box3">

    </div>
    <div class="box4">

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

    </div>
    <div class="box2">

    </div> -->

    <!-- <div class="">
      <p>ajdfkajdkfalkdfj</p>
      <p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p><p>ajdfkajdkfalkdfj</p>
    </div> -->

    <!-- <div class="box1">
      <p>我是段落</p>
    </div>
    <div class="box2">
      ![](../HTML5/0.gif)
      <p>我是段落</p>
    </div> -->

    <!-- <div class="box1">
      <div class="box2">
      </div>
    </div> -->

    <div class="box1">

    </div>
    <div class="box2">

    </div>

  </body>
</html>

第九十二課 背景顏色

1、如何設置標簽的背景顏色
在CSS中有一個background-color:屬性,就是專門用來設置標簽的背景顏色的
取值：

具體單詞
rgb
rgba
十六進制

第九十三課 背景圖片

如何設置背景圖片
在CSS中有一個叫做background-image: url();的屬性，就是專門用來設置背景圖片的
注意點：

1、圖片的地址必須放在url()中，圖片的地址可以是本地的地址，也可以是網絡的地址
2、如果圖片的大小沒有標簽的大小大，那么會自動在水平和垂直方向平鋪和填充
3、如果網頁上出現了圖片，那么瀏覽器會再次發送請求獲取圖片

第九十四課 背景平鋪

如何控制背景圖片的平鋪方式
在CSS中有一個background-repeat屬性，就是專門用于控制背景圖片的平鋪方式的
取值：

repeat 默認，在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪

repeat-y 只在垂直方向平鋪

應用場景：

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

第九十五課 背景定位上

如何控制背景圖片的位置
在CSS中有一個叫做background-position：屬性專門用于控制背景圖片的位置
格式：

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

取值：

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

具體的像素

background-position:100px 200px;
記得一定要寫單位px,否則無效；同時取值可以為負數
注意點
同一個標簽可以同時設置背景顏色和圖片，圖片會覆蓋顏色

第九十六課 背景定位下

如何讓圖片始終居中

background-position:center top;

應用：

大的圖片，重要信息放中間，適應瀏覽器尺寸變動

第九十七課 背景關聯和縮寫

背景屬性縮寫的格式

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

注意點：

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

背景關聯方式

默認情況下背景圖片會隨著滾動條的滾動而滾動，如果不想滾動，就要修改背景圖片和滾動條的關聯方式

在CSS中background-attachment屬性就是專門修改關聯方式的
格式：

background-attachment: scroll;

取值：

scroll 默認值，會隨著滾動條的滾動而滾動
fixed 不會隨著滾動條的滾動而滾動

第九十八課 背景圖片和插入圖片

快捷鍵

bi background-image:url();
bgr background-repeat:
bp background-position:0 0;
ba background-attachment:;
bg+ background:#fff url() 0 0 no-repeat;

div.box$*2
<div class="box1">

</div>
<div class="box2">

</div>

背景圖片

1、僅僅是一個裝飾，不會占用位置空間
2、有定位屬性，控制位置比較方便

插入圖片

1、會占用位置空間
2、沒有定位屬性，控制位置不太方便
3、插入圖片的語義比背景圖片的語義要強，所以在企業開發中如果

你的圖片想被搜索引擎收錄，那么推薦使用插入圖片

第九十九課 背景圖片練習

多張圖片拼接成一張圖片，div 嵌套 背景圖片拼接, 大小尺寸一致

第100課 CSS精靈圖

CSS精靈圖：一種圖像合成技術
作用：可以減少請求次數，以及可以降低服務器處理壓力
使用方法：CSS精靈圖需要配合背景圖片和背景定位來使用

第101課 CSS精靈圖練習

顯示精靈圖中的多小圖標

內容參考

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容