CSS 常用樣式 – 背景屬性 - ⎝⎛CodingNote.cc ⎞⎠

CSS 常用樣式 – 背景屬性

2021 年 4 月 12 日
筆記

一、背景顏色 background-color

屬性名：background-color
作用：在盒子區域添加背景顏色的修飾
加載區域：在 border 及以內加載背景顏色
屬性值：顏色名、顏色值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="box"> 背景顏色 </div>  
</body>
</html>

二、背景圖片 background-image

屬性名：background-image
作用：給盒子添加圖片的背景修飾
加載範圍：默認的加載到邊框及以內部分。後期如果圖片不重複加載，加載從 border 以內開始
屬性值：url(圖片路徑)
url：uniform resource locator，統一資源定位符，小括號內部書寫查找圖片的路徑

.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            /* background-color: slateblue;  背景顏色 */
            background-image: url(images/lagouwang.jpg);
        }

如果圖片不重複，從 border 以內開始加載
背景圖和背景顏色可以同時設置，背景圖會壓蓋背景顏色，沒有背景圖的區域會顯示背景顏色

三、背景重複 background-repeat

屬性名：background-repeat
作用：設置添加的背景圖是否要在盒子中重複進行加載
根據屬性值不同，有四種重複加載方式

.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            /* background-color: slateblue;  背景顏色 */
            background-image: url(images/lagou_small.jpg);
            /* background-repeat: repeat; */
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;
        }

四、背景定位 background-position

屬性名：background-position
作用：主要用於設置不重複的圖片在背景區域的加載開始位置
屬性值：分為三種寫法，單詞表示法、像素表示法、百分比表示法。不論哪種寫法
屬性值都有兩個，值之間用空格分隔
第一個屬性值：表示背景圖片在水平方向的位置
第二個屬性值：表示背景圖片在垂直方向的位置

①、單詞表示法

屬性值都是使用代表方向的單詞進行書寫
水平方向可選單詞：left、center、right
垂直方向可選單詞：top、center、bottom
單詞表示圖片與盒子背景區域進行對應方向的對齊

background-position: right bottom; /* 對應方向對齊 */

②、像素表示法

使用像素值作為背景定位的屬性值
第一個屬性值：像素是幾，表示背景圖片左上角針對 border 以內的左上頂點水平方向位移的距離
第二個屬性值：像素是幾，表示背景圖片左上角針對 border 以內的左上頂點垂直方向位移的距離

background-position: 50px 50px;

像素值區分正負，正負代表位移方向不同：

正數：表示圖片針對盒子的原點向右、向下移動
負數：表示圖片針對盒子的原點向左、向上移動

百分比表示法使用百分比數字作為屬性值

100% 代表的數值：
水平方向，等價於盒子的 border 以內的背景區域寬度減去圖片的寬度
垂直方向，等價於盒子的 border 以內的背景區域高度減去圖片的高度

五、背景附着 background-attachment

屬性名：background-attachment
作用：設置的是背景圖片是否要隨着頁面或者盒子的滾動而滾動。屬性值

六、綜合寫法 background

background 屬性可以將五個單一屬性的值進行合寫
屬性值：可以有 1-5 個屬性值，值之間用空格進行分隔，背景定位的兩個屬性值算作一個屬性值，不能被分開也不能顛倒順序。五個屬性值之間可以互換位置

 body {
          background: url(images/bj.jpg) no-repeat center top scroll #666;
      }

注意事項：

①、如果屬性值沒有設置完全，其他沒有設置的單一屬性會按照默認值加載

background: pink;

②、如果想去層疊綜合屬性中的一部分，其他的屬性保持不變，最好使用單一屬性寫法進行層疊

body {
          background: url(images/bj.jpg) no-repeat center top  #666;
          background-attachment: scroll;
      }

七、背景應用

①、替換插入圖

h1 標籤是權重最高的標籤，一般會在內部書寫最重要的內容，比如 logo 圖片、最大的標題等
另外

內部的文字，可以幫助提高 SEO 搜索排名
在設置的是 logo 圖片時，如果使用插入圖，就不能書寫搜索關鍵字

<h1>
    <a href=""><img src="images/lagouwang.jpg"> </a>
</h1>

背景圖替換插入圖方法

如果想解決 SEO 問題，可以將 HTML 結構中，插入圖換成搜索關鍵字，然後使用 css 添加背景圖給標籤或標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    h1 {
        width: 200px;
        height: 100px;
    }

    h1 a {
        display: block;
        width: 200px;
        height: 100px;
        background: url(images/lagou_small.jpg) no-repeat;
    }

</style>

</head>
<body>

    <h1>
        <a href=""> 今天|太陽|真好|666 </a>
    </h1>

</body>
</html>

文字隱藏方法

1、將字號設置為 0。IE8 及以上或高版本瀏覽器可以隱藏文字，但是 IE7 及以下有兼容問題

font-size: 0;

2、可以設置給標籤一個 text-indent 屬性，屬性值為負的很大的值，文字會走到盒子外部，直接再設置溢出隱藏屬性，將溢出文字隱藏

h1 a {
        display: block;
        width: 200px;
        height: 100px;
        background: url(images/lagou_small.jpg) no-repeat;
        /* font-size: 0; */
        text-indent: -20em;
        overflow: hidden;
    }

②、padding 區域背景圖

在一個盒子中有背景圖部分，而且有文字內容，文字會讓開背景圖區域進行加載，背景區域應該使用 padding 擠出位置
四個方向的 padding 都可能用於添加背景圖

.list {
        width: 300px;
        padding-left: 10px;
        border: 1px solid #000;
        margin: 10px;
        list-style: none;
        font: 16px/32px "楷體"
    }

    .list li {
        padding-left: 25px;
        background: url(images/tubiao.png) no-repeat left center ;

    }

③、精靈圖技術

當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶
然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度
為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了 CSS 精靈技術（也稱 CSS Sprites、CSS 雪碧）

css 精靈

CSS 精靈是一種處理網頁背景圖像的方式
它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來
通常情況下，這個由很多小的背景圖像合成的大圖被稱為精靈圖

css 精靈的技術依據

將網頁中需要用到的小尺寸背景圖製作成一張背景透明的 png 圖片
利用背景定位技術，將精靈圖的每個小圖片加載到對應的標籤上

製作精靈圖的注意事項

精靈圖上放的都是小的裝飾性質的背景圖片，插入圖片不能往上放
精靈圖的寬度取決於最寬的那個背景圖片的標籤寬度
精靈圖可以橫向擺放也可以縱向擺放，但是每個圖片之間必須留夠足夠的空白，保證背景圖片加載到一個標籤內部時，不能出現多餘內容
在精靈圖的最底端，盡量留一點空白，方便以後添加其他精靈圖

可以通過網上的在線進行製作精靈圖

八、CSS3 新增背景屬性

①、背景半透明

CSS3 支持背景半透明的寫法，顏色值增加了一種 rgba 模式
rgba 模式：在 rgb 基礎上增加了一個不透明度的設置，不透明度 alpha 取值範圍在 0-1 之間，0 表示完全透明，1 表示完全不透明，0.5 表示半透明
書寫方式：rgba(紅色，綠色，藍色，不透明度)
注意：背景半透明是指盒子背景半透明，盒子裏面的內容不受影響

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p{
            width: 100px;
            height: 100px;
        }
        .p1 {
            background-color: rgba(0, 255, 0, 1);
        }
        .p2 {
            background-color: rgba(0, 255, 0, 0.5);
        }
    </style>

</head>
<body>
    <p class="p1"> 原 </p>
    <p class="p2"> b半透明  </p>
</body>
</html>

同樣，可以給文字和邊框透明，都是 rgba 的格式來寫

color: rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.5);

②、背景縮放 background-size

通過 background-size 設置背景圖片的尺寸，就像我們設置的尺寸一樣，在移動 Web 開發中做屏幕適配應用非常廣泛

.box1 {
    background-size: 50px 50px;
}

.box2 {

    background-size: 50% 50%;
}

.box3 {
    background-size: cover;
}
.box4 {
    background-size: contain;
}

<div class="box1"> px 值 </div>
<div class="box2"> 百分比 </div>
<div class="box3"> cover </div>
<div class="box4"> contain </div>

③、多背景

CSS3 中規定，一個盒子上，可以添加多個背景圖片
background-image 的屬性值書寫時，以逗號分隔多背景的 URL路徑地址
注意：背景加載時，先寫的背景壓蓋後寫的背景圖片

 background-image: url(images/pdx.jpg) ,url(images/lagouwang.jpg);

CSS 常用樣式 – 背景屬性

一、背景顏色 background-color

二、背景圖片 background-image

三、背景重複 background-repeat

四、背景定位 background-position

①、單詞表示法

②、像素表示法

五、背景附着 background-attachment

六、綜合寫法 background

①、如果屬性值沒有設置完全，其他沒有設置的單一屬性會按照默認值加載

②、如果想去層疊綜合屬性中的一部分，其他的屬性保持不變，最好使用單一屬性寫法進行層疊

七、背景應用

①、替換插入圖

內部的文字，可以幫助提高 SEO 搜索排名

②、padding 區域背景圖

③、精靈圖技術

八、CSS3 新增背景屬性

①、背景半透明

②、背景縮放 background-size

③、多背景

VirMach 便宜 VPS

QNews

CSS 常用樣式 – 背景屬性

一、背景顏色 background-color

二、背景圖片 background-image

三、背景重複 background-repeat

四、背景定位 background-position

①、單詞表示法

②、像素表示法

五、背景附着 background-attachment

六、綜合寫法 background

①、如果屬性值沒有設置完全，其他沒有設置的單一屬性會按照默認值加載

②、如果想去層疊綜合屬性中的一部分，其他的屬性保持不變，最好使用單一屬性寫法進行層疊

七、背景應用

①、替換插入圖

內部的文字，可以幫助提高 SEO 搜索排名

②、padding 區域背景圖

③、精靈圖技術

八、CSS3 新增背景屬性

①、背景半透明

②、背景縮放 background-size

③、多背景

分享此文：

Related Posts

WeakMap 本身釋放，而 keyObject 沒有釋放的情況下，value 會釋放嗎？

優雅的交換兩個數的值

被封QQ號繞過騰訊「復活」 6億黑產栽了

日本核廢水要污染整個太平洋！中國表態

VirMach 便宜 VPS

QNews

熱門搜尋