CSS3之背景

weixin_34320159發表於2018-05-07
CSSS3

一、背景的基本屬性

背景主要包括五個屬性：

  • background-color（背景顏色）
  • background-image（背景圖片）
  • background-repeat（背景圖片展示方式）
  • background-attachment（背景圖片是固定還是滾動）
  • background-position（背景圖片位置）

可以單獨寫，也可以將這些屬性串在一起寫。

語法規則：

background：<background-color>
            <background-image>
            <background-repeat>
            <background-attachment>
            <background-position>

1、background-color屬性

語法：background-color：transparent||<color>
預設值為transparent，不設定任何顏色值情況下是透明色。

常用的顏色格式是：

  • 顏色名：如red
  • rgb色：如rgb(255,0,0)或rgb(100%,0%,0%)
  • hls值：如hls(0,100%,50%)
  • 十六進位制值：如#eee
  • rgba：如rgba(255,0,0,0.3)
  • hsla：如hsla(0,100%,50%,0.5)

2、background-image屬性

語法：background-image:none||url
url是背景圖片的地址，支援相對地址或絕對地址

3、background-repeat屬性

語法：background-repeat:repeat||repeat-x||repeat-y||no-repeat
引數說明：

  • repeat：背景圖片沿元素的X軸和Y軸同時平鋪
  • repeat-x：背景圖片沿元素的X軸平鋪，Y軸不進行任何鋪放
  • repeat-y：背景圖片沿元素的Y軸平鋪，X軸不進行任何鋪放
  • no-repeat：背景圖片不做任何鋪放

4、background-attachment屬性

語法：background-attachment:scroll||fixed
用來設定元素背景圖片是否固定或者隨著頁面的其餘部分滾動。

  • scroll：預設值，表示背景圖片會隨著瀏覽器滾動條一起滾動
  • fixed：表示背景圖片固定不動

注意：background-attachment取值為fixed時，一般運用在html或body標籤上，使用在其它標籤上不能達到固定效果。

5、background-position屬性

語法：

background-position:<percentage>||
                    <length>||
                    [left|center|right]
                    [,top|center|bottom]

用來設定元素背景圖片的位置，預設值是(0,0)||(0%,0%)||(left top)值可以是具體的百分數或數值設定（可以是負值），也可以使用關鍵詞left、center、right、top、bottom配合設定。

（1）top left、left top和0% 0%、0 0
表示元素背景圖片的起點位置與元素的左上角吻合
（2）top、top center、center top和50% 0
表示元素背景圖片的頂邊中心點與元素的頂邊中心點吻合
（3）right top、top right和100% 0
表示元素背景圖片的右上頂點與元素右上頂點吻合
（4）right、right center、center right和100% 50%
表示元素背景圖片右邊中心點與元素右邊中心點吻合
（5）bottom right、right bottom和100 % 100%
表示元素背景圖片右下頂角與元素右下角吻合
（6）bottom、bottom center、center bottom和50% 100%
表示元素背景圖片底邊中心點與元素底邊中心點吻合
（7）bottom left、left bottom和0% 100%
表示元素背景圖片的左下角與元素左下角吻合
（8）left、left center、center left和0% 50%
表示元素背景圖片的左邊中心點與元素左邊中心點吻合
（9）center、center center和50% 50%
表示元素背景圖片正中心點與元素正中心點吻合

二、與背景相關的新增屬性

  • background-origin：指定繪製背景圖片的起點
  • background-clip：指定背景圖片的顯示範圍
  • background-size：指定背景圖片的尺寸大小
  • background-break：指定內聯元素的背景圖片進行平鋪時的迴圈方式

1、background-origin屬性

background-origin主要用來決定background-position屬性的參考原點，即決定背景圖片定位的起點。

語法：background-origin:padding-box||border-box||content-box

屬性值說明：

  • padding-box：預設值，決定background-position起始位置從padding的外邊緣開始顯示背景圖片
  • border-box：決定background-position起始位置從border的外邊緣開始顯示背景圖片
  • content-box：決定background-position起始位置從content的外邊緣開始顯示背景圖片

示例效果圖：


4041074-d2ef0111ebf95133.png
padding-box.png
4041074-e7b12a79adaaaae8.png
border-box.png
4041074-61b01341a6f1bee0.png
content-box.png

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css測試</title>
    <style>
    div {
        width: 300px;
        height: 200px;
        border: 20px dashed rgba(0, 0, 0, 0.3);
        background: orange url(img/a5.png) no-repeat left top;
        padding: 20px;
        margin: 30px;
    }

    .padding-box {
        -webkit-background-origin: padding-box;
        -moz-background-origin: padding-box;
        -o-background-origin: padding-box;
        -ms-background-origin: padding-box;
        background-origin: padding-box;
    }
    .border-box{
        -webkit-background-origin:border-box;
        -moz-background-origin:border-box;
        -o-background-origin:border-box;
        -ms-background-origin:border-box;
        background-origin:border-box;
    }
    .content-box{
        -webkit-background-origin:content-box;
        -moz-background-origin:content-box;
        -o-background-origin:content-box;
        -ms-background-origin:content-box;
        background-origin:content-box;
    }
    </style>
</head>
<body>
    <div class="padding-box"></div>
    <div class="border-box"></div>
    <div class="content-box"></div>
</body>
</html>

2、background-clip屬性

background-clip屬性用來定義背景影像的裁剪區域。
語法：background-clip:padding-box||border-box||content-box

屬性值說明：

  • padding-box：背景延伸到padding的外邊緣，但不會超出邊框的範圍
  • border-box：預設值，背景圖片在邊框下
  • content-box：背景僅在內容區域繪製，不會超出padding和邊框的範圍

示例效果圖：


4041074-e0272265be4d483f.png
三種效果

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css測試</title>
    <style>
    div {
        width: 300px;
        height: 200px;
        border: 20px dashed rgba(0, 0, 0, 0.3);
        background: orange url(img/a5.png) no-repeat left top;
        padding: 20px;
        margin: 30px;
        display: inline-block;
    }

    .padding-box {
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding-box;
        -o-background-clip: padding-box;
        -ms-background-clip: padding-box;
        background-clip: padding-box;
    }

    .border-box {
        -webkit-background-clip: border-box;
        -moz-background-clip: border-box;
        -o-background-clip: border-box;
        -ms-background-clip: border-box;
        background-clip: border-box;
    }

    .content-box {
        -webkit-background-clip: content-box;
        -moz-background-clip: content-box;
        -o-background-clip: content-box;
        -ms-background-clip: content-box;
        background-clip: content-box;
    }
    </style>
</head>
<body>
    <div class="padding-box"></div>
    <div class="border-box"></div>
    <div class="content-box"></div>
</body>
</html>

3、background-size屬性

background-size用來指定背景影像的尺寸，可以控制背景圖片在水平和垂直兩個方向的縮放，也可以控制圖片拉伸覆蓋背景區域的方式。
背景圖片能夠自適應元素盒子的大小，實現與模組大小完全適應的背景圖片，避免了因區塊尺寸不同而需要設計不同的背景圖片。

語法：background-size:auto||<length>||<percentage>||cover||contain

屬性值說明：

  • auto：預設值，保持背景圖片的原始高度和寬度
  • <length>：取具體的整數值，將改變背景圖片的大小
  • <percentage>：取百分值，改變背景圖片的大小，但是相對於元素的寬度進行的計算，並不是根據背景圖片的寬度來進行計算
  • cover：將背景圖片放大，以適合鋪滿整個容器。會使背景圖片失真。
  • contain：保持背景圖片本身的寬高比例，將背景圖片縮放到寬度或高度正好適應所定義背景容器的區域。

使用示例：

div {
        width: 320px;
        height: 270px;
        border: solid red 1px;
        background: url(img/a5.png) no-repeat;
        background-size:50% 80%;
    }

效果圖：


4041074-cf0be5b2193a5f90.png

使用示例2：

div {
        width: 320px;
        height: 270px;
        border: solid red 1px;
        background: url(img/a5.png) no-repeat center;
        background-size:cover
    }

效果圖2：
background-size:cover配合background-position:center常用來製作滿屏背景效果。


4041074-22768152a66f570d.png

使用示例3：

div {
        width: 320px;
        height: 270px;
        border: solid red 1px;
        background: url(img/a5.png) no-repeat;
        background-size:contain;
    }

使用效果圖3：
整個背景影像根據背景區域對背景影像進行了寬高比例的縮放。contain在某些情況之下無法讓背景影像填充整個容器的大小。


4041074-92ed9b4bd15a8058.png

只有當background-size的值為auto時，背景影像才不會失真，其他值都會不同程度的造成背景影像的失真，使用時請仔細考慮。

相關文章