第十三章 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署尤、如何設(shè)置標簽的背景顏色
在CSS中有一個background-color:屬性,就是專門用來設(shè)置標簽的背景顏色的
取值：

具體單詞
rgb
rgba
十六進制

第九十三課背景圖片

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

1脐帝、圖片的地址必須放在url()中筋搏，圖片的地址可以是本地的地址，也可以是網(wǎng)絡(luò)的地址
2厕隧、如果圖片的大小沒有標簽的大小大奔脐，那么會自動在水平和垂直方向平鋪和填充
3、如果網(wǎng)頁上出現(xiàn)了圖片吁讨，那么瀏覽器會再次發(fā)送請求獲取圖片

第九十四課背景平鋪

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

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

repeat-y 只在垂直方向平鋪

應(yīng)用場景：

可以通過背景圖片的平鋪來降低圖片的大小建丧，提升網(wǎng)頁的訪問速度

第九十五課背景定位上

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

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

取值：

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

具體的像素

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

第九十六課背景定位下

如何讓圖片始終居中

background-position:center top;

應(yīng)用：

大的圖片翎朱，重要信息放中間橄维，適應(yīng)瀏覽器尺寸變動

第九十七課背景關(guān)聯(lián)和縮寫

背景屬性縮寫的格式

background：背景顏色背景圖片平鋪方式關(guān)聯(lián)方式定位方式;

注意點：

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

背景關(guān)聯(lián)方式

默認情況下背景圖片會隨著滾動條的滾動而滾動拴曲，如果不想滾動争舞，就要修改背景圖片和滾動條的關(guān)聯(lián)方式

在CSS中background-attachment屬性就是專門修改關(guān)聯(lián)方式的
格式：

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遭贸、插入圖片的語義比背景圖片的語義要強戈咳，所以在企業(yè)開發(fā)中如果

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

第九十九課背景圖片練習(xí)

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

第100課 CSS精靈圖

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

第101課 CSS精靈圖練習(xí)

顯示精靈圖中的多小圖標

內(nèi)容參考

最后編輯于：2017.12.11 05:34:34

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市算利，隨后出現(xiàn)的幾起案子册踩，更是在濱河造成了極大的恐慌，老刑警劉巖效拭，帶你破解...
沈念sama閱讀 211,348評論 6贊 491
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件暂吉，死亡現(xiàn)場離奇詭異，居然都是意外死亡缎患，警方通過查閱死者的電腦和手機慕的，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,122評論 2贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來挤渔，“玉大人肮街，你說我怎么就攤上這事∨械迹” “怎么了嫉父？”我有些...
開封第一講書人閱讀 156,936評論 0贊 347
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長眼刃。經(jīng)常有香客問我绕辖，道長，這世上最難降的妖魔是什么擂红？我笑而不...
開封第一講書人閱讀 56,427評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任仪际，我火速辦了婚禮，結(jié)果婚禮上昵骤，老公的妹妹穿的比我還像新娘树碱。我一直安慰自己，他們只是感情好涉茧，可當我...
茶點故事閱讀 65,467評論 6贊 385
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布赴恨。她就那樣靜靜地躺著，像睡著了一般伴栓。火紅的嫁衣襯著肌膚如雪伦连。梳的紋絲不亂的頭發(fā)上雨饺，一...
開封第一講書人閱讀 49,785評論 1贊 290
城市分裂傳說
那天，我揣著相機與錄音惑淳，去河邊找鬼额港。笑死，一個胖子當著我的面吹牛歧焦，可吹牛的內(nèi)容都是我干的移斩。我是一名探鬼主播，決...
沈念sama閱讀 38,931評論 3贊 406
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼绢馍，長吁一口氣：“原來是場噩夢啊……” “哼向瓷！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起舰涌，我...
開封第一講書人閱讀 37,696評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤猖任，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后瓷耙，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體朱躺，經(jīng)...
沈念sama閱讀 44,141評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,483評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年搁痛，在試婚紗的時候發(fā)現(xiàn)自己被綠了长搀。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,625評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡鸡典，死狀恐怖源请，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情彻况，我是刑警寧澤巢钓，帶...
沈念sama閱讀 34,291評論 4贊 329
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站疗垛，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏硫朦。R本人自食惡果不足惜贷腕，卻給世界環(huán)境...
茶點故事閱讀 39,892評論 3贊 312
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望咬展。院中可真熱鬧泽裳，春花似錦、人聲如沸破婆。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,741評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽祷舀。三九已至瀑梗，卻和暖如春烹笔，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背抛丽。一陣腳步聲響...
開封第一講書人閱讀 31,977評論 1贊 265
情欲美人皮
我被黑心中介騙來泰國打工谤职，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人亿鲜。一個月前我還...
沈念sama閱讀 46,324評論 2贊 360
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親哑子。傳聞我的和親對象是個殘疾皇子岳枷，可洞房花燭夜當晚...
茶點故事閱讀 43,492評論 2贊 348

第十三章 CSS背景和精靈圖

第九十二課 背景顏色

第九十三課 背景圖片

第九十四課 背景平鋪

第九十五課 背景定位上

第九十六課 背景定位下

第九十七課 背景關(guān)聯(lián)和縮寫

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

第九十九課 背景圖片練習(xí)