CSS中關於background屬性的具體分析

一、CSS中關於background屬性的具體分析屬性可以設定一個元素的背景樣式，當然前提是這個元素有具體的寬高值。

先來一個簡單的背景設定：

#show-box {
            width: 800px;
            height: 500px;
            CSS中關於background屬性的具體分析: #000;
            CSS中關於background屬性的具體分析-image: url(image url);
        }
    </style>

這裡只是簡單的設定了顏色和背景貼圖。

下面讓我們來看看官方的CSS中關於background屬性的具體分析的屬性：

　　語法格式：

　　CSS中關於background屬性的具體分析: color position size repeat origin clip attachment image#attachment image;

　　注意：如果同時設定了“position”和“size”兩個屬性，應該用左斜線“/”，而不是用空格把兩個參數值分開：“position/size”。

1 CSS中關於background屬性的具體分析: url("img.jpg") center center/100% 100% no-repeat;

　　屬性表（圖片可能會顯示得太小，請右鍵「在新標籤中開啟」以查看原始圖）：

　　

　　1.color：背景顏色值。這個屬性會把整個元素添加顏色，而且處於最底層（在有背景圖片的情況下就可以看出）。

　　可選值：預設是透明，其他值可以透過查看「CSS顏色值表」來設定。

<style>
        #show-box {
            width: 180px;
            height: 180px;
            border: 20px dashed #000;
            CSS中關於background屬性的具體分析-color: #000000;
            CSS中關於background屬性的具體分析-color: blue;
            CSS中關於background屬性的具體分析-color: rgb(255, 255, 255);
            CSS中關於background屬性的具體分析-color: rgba(255, 255, 255, 0.8);
        }
    </style>

　　2.position：背景圖片的定位。如果沒有圖片設置，那麼這個屬性不起效果。

　　可選值：兩個參數，水平位置和垂直位置。如果只有一個值，第二個值為「center」。

　　預設值是元素的左上頂角。可以使用位置關鍵字（top，right，bottom，left，center）。百分比（以元素大小為基底值）。像素值。

<style>
        #show-box {
            width: 180px;
            height: 180px;
            border: 20px dashed #000;
            CSS中關於background屬性的具體分析-position: center;
            CSS中關於background屬性的具體分析-position: center top;
            CSS中關於background屬性的具體分析-position: 0 100px;
            CSS中關於background屬性的具體分析-position: 10% 20%;
        }
    </style>

 

　　3.size：圖片尺寸。應用於圖片。

　　可選值：兩個數值，如果只有一個值，第二個值為auto。

　　預設是圖片本身大小。可以使用像素值，百分之百（以元素大小為基底值）。

　　cover：等比例縮放圖片，覆寫這個元素。類似與windows中桌面背景的「填充」。

　　contain：等比例縮放圖片，適應元素的寬或高。類似於windows中桌面背景的「適應」。

　　

　　　4.repeat：平鋪方式。

　　　　repeat：完全平鋪，複製圖片把整個元素填滿。 （預設）

　　　　repeat-x：水平平鋪，在水平方向複製並平鋪。

　　　　repeat-y：垂直平鋪，在垂直方向複製並平鋪。

　　　　no-repeat：不平鋪，只使用一張圖片。

　　　5.origin：背景的參考區域。

　　　可選值：border-box，padding-box，content-box。

　　　6.clip：背景的可視區域。

　　　可選值：border-box，padding-box，content-box。

　　　對比一下不同值的效果圖：

　　　　1.origin：border-box；clip：border-box；

<style>
        #show-box {
            width: 180px;
            height: 180px;
            margin: 20px;
            padding: 20px;
            border: 20px dashed #000;
            CSS中關於background屬性的具體分析: url("img.jpg") no-repeat border-box border-box;
        }
    </style>

　　　　

　　　　2.origin：padding-box；clip：border-box;

<style>
        #show-box {
            width: 180px;
            height: 180px;
            margin: 20px;
            padding: 20px;
            border: 20px dashed #000;
            CSS中關於background屬性的具體分析: url("img.jpg") no-repeat padding-box border-box;
        }
    </style>

　　　　　

##　　　　3.origin：content##box；

<style>
        #show-box {
            width: 180px;
            height: 180px;
            margin: 20px;
            padding: 20px;
            border: 20px dashed #000;
            CSS中關於background屬性的具體分析: url("img.jpg") no-repeat content-box border-box;
        }
    </style>

　　　　

 

　　　　4.origin：border-box；clip：content-box;

rree

　　　　　　　　　　　　　## 

　　可以看出，origin設定的是位置，clip則會根據區域裁切出背景圖片。

 　　　　7.attachment：設定背景影像是否固定或隨著頁面的其餘部分捲動。

　　預設值是scroll：背景圖片隨頁面的其餘部分滾動。 fixed：背景影像是固定的。

 

　　8.多背景設定。

　　導入圖片：CSS中關於background屬性的具體分析-image: url(image url);

 

二、多背景設定。

　　多背景的寫法：使用逗號“，”隔開，繼續寫背景屬性。

　　CSS中關於background屬性的具體分析: 

color position size repeat origin clip attachment image, 

color position size repeat origin clip attachment image

#;#　##　：CSS中關於background屬性的具體分析-image：url（image url 1），url（image url 2）；

<style>
        #show-box {
            width: 180px;
            height: 180px;
            margin: 20px;
            padding: 20px;
            border: 20px dashed #000;
            CSS中關於background屬性的具體分析: url("img.jpg") no-repeat border-box content-box;
        }
    </style>

<style>
        #show-box {
            width: 180px;
            height: 180px;
            border: 20px dashed #000;
            CSS中關於background屬性的具體分析: url("img.jpg1") left top/100% 100% no-repeat,
            url("img.jpg2") left center/100% 100% no-repeat,
            url("img.jpg3") left bottom/100% 100% no-repeat,
            url("img.jpg4") center top/100% 100% no-repeat;
        }
    </style>

以上是CSS中關於background屬性的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！