學習CSS的background屬性及其取值（實踐）

王菜鳥發表於2020-10-21

CSS的背景屬性

屬性	描述	可用值
background	設定背景的所有控制選項	其他背景屬性可用值的集合
background-color	設定背景顏色	命名顏色、十六進位制顏色等
background-image	設定背景圖片或漸變填充	url(URL)或漸變屬性值
background-repeat	設定背景圖片的平鋪方式	repeaat、no-repeat、repeat-x、repeat-y
background-attachment	設定背景圖片固定還是隨內容滾動	scroll、fixed
background-position	設定背景圖片顯示的起始位置	【left、center、right】、【top、center、bottom】、【x%、y%】、【x-pos】【y-pos】

實踐

注意：將下面程式碼中的圖片路徑換成自己的圖片路徑就可以實現相同效果

練習一

實現圖文混排，圖為背景
在這裡插入圖片描述

<!--
 * @Author: OriginalCoder
 * @Date: 2020-10-21 15:48:07
 * @version: 
 * @LastEditTime: 2020-10-21 16:55:45
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background-color: #eadece;
        background-image: url("./image/sina.jpg");
        background-repeat: no-repeat;
        background-position: right bottom;
        /* background-attachment: fixed; */
      }
    </style>
  </head>
  <body>
      
    <h3>十二生肖兩兩相對，六道輪迴</h3>
      
    <p>
      第一組是鼠和牛，老鼠代表智慧，牛代表勤奮，智慧和勤奮一定要緊密結合在一起，如果光有智慧不勤奮，那就是小聰明，光是勤奮不動腦筋，那就是愚蠢
    </p>
      
    <p>
      第二組是虎和兔，老虎代表勇猛，兔子代表謹慎，勇猛和謹慎只有結合在一起才能做到膽大心細，如果勇猛離開了謹慎就變成了魯莽，而光有了心細就不可能有更多的收穫……
    </p>
      
    <p>
       第三組是龍和蛇，龍代表剛猛，蛇代表柔韌，所謂剛者易折，而僅有柔的一面就容易失去主見，所以剛柔並濟才是最好的選擇……
    </p>
     
    <p>
       第四組是馬和羊，馬代表勇往直前，羊代表柔順，如果一個人只顧直奔目標，不顧及周邊環境，必然會和周邊事物不斷的磕碰，最後不見得會成功，如果光有柔順，她可能連方向也沒有，所以勇往直前的秉性要和和順的性格結合在一起，才能超越
    </p>
      
    <p>
      第五組是猴和雞，猴子代表靈活，善變能力強，雞定時打鳴，代表恆定，如果光靈活但做不到恆定的話，再好的計劃也會泡湯，所以要一方面要保持穩定性保持整體的和諧和秩序良好，另一方面又能在變通中前進，這才是最厲害的做法
    </p>
      
    <p>
          第六組也是最後一組那就是狗和豬，狗代表忠誠，豬代表隨和，如果一個人太忠誠不懂得隨和，就會排斥他人，反過來一個人太隨和卻不忠誠，那麼這個人就會失去原則，所以一定要將忠誠和隨和結合在一起，這樣才能保持自己內心深處的平衡如果我們能夠做到十二生肖兩兩相對原理中的任何一條，我們就應該能獲得更多的
    </p>
  </body>
</html>

練習二

詩詞的背景混排
在這裡插入圖片描述

<!--
 * @Author: OriginalCoder
 * @Date: 2020-10-21 15:48:07
 * @version: 
 * @LastEditTime: 2020-10-21 17:00:14
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        margin: 0 auto;
        border-radius: 30px;
        background-image: url("../ClassCode/水調歌頭/yuese.jpg");
        background-repeat: no-repeat;
        background-position: 50% 50%;
        height: 485px;
        width: 750px;
      }
      .shici {
        position: relative;
        top: 85px;
        text-align: center;
        font-weight: bold;
      }
      .title {
        font-size: 30px;
        color: #84deff;
      }
      .content {
        margin-top: 30px;
        line-height: 30px;
        color: #84deff;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- <img src="../ClassCode/水調歌頭/yuese.jpg" alt="" /> -->
      <div class="shici">
        <div class="title">水調歌頭</div>

        <div class="content">
          明月幾時有？把酒問青天。<br />
          不知天上宮闕，今夕是何年。<br />
          我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。 <br />
          起舞弄清影，何似在人間。 <br />
          轉朱閣，低綺戶，照無眠。 <br />
          　 不應有恨，何事長向別時圓？ <br />
          人有悲歡離合，月有陰晴圓缺，此事古難全。 <br />
          但願人長久，千里共嬋娟。 <br />
          ——蘇軾
        </div>
      </div>
    </div>
  </body>
</html>

練習三

實現對聯的排列效果
在這裡插入圖片描述

方法一

僅使用background-position來實現

<!--
 * @Author: OriginalCoder
 * @Date: 2020-10-21 15:48:07
 * @version: 
 * @LastEditTime: 2020-10-21 17:11:31
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .left {
        height: 927px;
        background: url("./left.jpg") no-repeat;
        /* background-position: ; */
        background-position: left top;
      }
      .top {
        height: 169px;
        /* width: 488px; */
        background: url("./top.jpg") no-repeat;
        background-position: center top;
        /* margin-top: -927px; */
      }
      .right {
        height: 927px;
        /* width: 217px; */
        background: url("./right.jpg") no-repeat;
        background-position: right top;
        /* margin-top: -200px; */
      }
      .bottom {
        height: 375px;
        /* width: 374px; */
        background: url("./bottom.jpg") no-repeat;
        background-position: center center;
        /* margin: -550px auto; */
      }
    </style>
  </head>
  <body>
    <div class="left">
      <div class="top">
        <div class="right"></div>
      </div>
      <div class="bottom"></div>
    </div>
  </body>
</html>

方法二

background屬性和margin混合使用

<!--
 * @Author: OriginalCoder
 * @Date: 2020-10-21 15:48:07
 * @version: 
 * @LastEditTime: 2020-10-21 17:13:37
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .left {
        height: 927px;
        background: url("./left.jpg") no-repeat;
        /* background-position: left top; */
      }
      .top {
        height: 169px;
        /* width: 488px; */
        background: url("./top.jpg") no-repeat;
        background-position: center top;
        margin-top: -927px;
      }
      .right {
        height: 927px;
        /* width: 217px; */
        background: url("./right.jpg") no-repeat;
        background-position: right top;
        margin-top: -169px;
      }
      .bottom {
        height: 375px;
        width: 374px;
        background: url("./bottom.jpg") no-repeat;
        background-position: center center;
        margin: -550px auto;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="top"></div>
      <div class="right"></div>
      <div class="bottom"></div>
    </div>
  </body>
</html>

練習四

實現點亮武漢，滑鼠移動到圖片上，將會發生顏色變化
在這裡插入圖片描述

<!--
 * @Author: OriginalCoder
 * @Date: 2020-10-21 15:48:07
 * @version: 
 * @LastEditTime: 2020-10-21 16:35:25
 * @LastEditors: OriginalCoder
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        height: 90%;
        width: 90%;
        margin: 0 auto;
      }
      .box {
        margin-left: 400px;
        width: 500px;
        height: 500px;
        background-size: cover;
        background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qODWdSDKJgxCzCab49zGfngsibQ3ibG3wo43iaubNNgwGt2g7ANIicxwQcg/640?wx_fmt=jpeg");
      }
      .box:hover {
        background-image: url("https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qX5cotNibgRrj4fKZkJ5vWD6LgOW0fCDIEdsSfKRMnZIpfDzDPVteL9g/640?wx_fmt=jpeg");
        transition: all 5s;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

CSS 的 background 屬性
2017-03-01
CSS
css的background屬性
2018-04-20
CSS
css詳解background八大屬性及其含義
2021-04-19
CSS
CSS3的background屬性
2020-11-19
CSSS3
CSS background-origin屬性
2020-10-13
CSS
CSS屬性總結之background
2017-12-22
CSS
css毛玻璃效果（外加background屬性）
2021-09-09
CSS
CSS3 background-size 屬性
2018-05-08
CSSS3
background 屬性
2022-04-16
background屬性
2020-11-22
CSS3背景裁切屬性——background-clip
2018-07-09
CSSS3
background常用屬性
2016-03-03
CSS學習——關於連結的屬性
2011-08-26
CSS
background相關屬性
2015-04-18
CSS變數（自定義屬性）實踐指南
2019-02-16
CSS變數
background屬性用法詳解
2017-02-18
background-attachment屬性進階
2015-05-19
Symbol 及其屬性
2019-05-04
Symbol
深入學習CSS屬性中的百分比
2017-07-31
CSS
css的屬性
2017-08-18
CSS
快速學習和實踐CSS/CSS3的線上教程
2014-08-04
CSSS3
CSS3學習之background-origin和background-clip區別
2018-05-19
CSSS3
css詳解position五種屬性用法及其含義
2021-04-12
CSS
前端學習–Html&Css–條件Hack和屬性Hack
2017-05-30
前端HTMLCSS
html學習(常用屬性)
2009-12-29
HTML
CSS 屬性篇(七)：Display屬性
2019-02-22
CSS
css實現匹配具有指定屬性的元素
2017-03-31
CSS
background-size屬性用法簡單介紹
2017-03-14
css屬性的可繼承性
2020-04-04
CSS繼承
css display 屬性
2019-09-24
CSS
CSS perspective 屬性
2019-04-20
CSS
CSS transform 屬性
2019-04-20
CSSORM
css常用屬性
2017-01-31
CSS
Css 中的position屬性
2017-11-09
CSS
css中的display屬性
2013-07-30
CSS
CSS中的margin屬性
2015-07-18
CSS
【PWA學習與實踐】(8)使用Service Worker進行後臺同步 – Background Sync
2019-03-03
【PWA學習與實踐】(8)使用Service Worker進行後臺同步 - Background Sync
2018-05-13

學習CSS的background屬性及其取值（實踐）

CSS的背景屬性

實踐

練習一

練習二

練習三

方法一

方法二

練習四

相關文章