僅供學習,轉載請注明出處

CSS background屬性 -小方三防

屬性解釋

background屬性是css中應用比較多,且比較重要的一個屬性,它是負責給盒子設置背景圖片和背景顏色的,background是一個復合屬性,它可以分解成如下幾個設置項:

background-color 設置背景顏色 background-image 設置背景圖片地址 background-repeat 設置背景圖片如何重復平鋪 background-position 設置背景圖片的位置 background-attachment 設置背景圖片是固定還是隨著頁面滾動條滾動

實際應用中,我們可以用background屬性將上面所有的設置項放在一起,而且也建議這么做,這樣做性能更高,而且兼容性更好,比如:“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”,這里面的“#00ff00”是設置background-color;“url(bgimage.gif)”是設置background-image;“no-repeat”是設置background-repeat;“left center”是設置background-position;“fixed”是設置background-attachment,各個設置項用空格隔開,有的設置項不寫也是可以的,它會使用默認值。

下面手寫例子來使用一下上面的參數

background-color 設置背景顏色

首先寫一個div,設置一下背景顏色看看。

CSS background屬性 -小方三防

好了,看了使用背景顏色的示例。下面再來看看使用背景圖片。

background-image 設置背景圖片地址

CSS background屬性 -小方三防

設置一下第二個div的寬高,讓背景圖片顯示好看一些。

CSS background屬性 -小方三防

那么能否設置背景圖片不重復平鋪呢?

background-repeat 設置背景圖片如何重復平鋪

設置background-repeat: no-repeat;則不會重復平鋪。

CSS background屬性 -小方三防

如果需要平鋪水平方向的內容呢?設置background-repeat: repeat-x;即可。

CSS background屬性 -小方三防

如果需要平鋪垂直方向的內容呢?設置background-repeat: repeat-y;即可。

CSS background屬性 -小方三防

那么全部內容都要平鋪呢?其實默認就可以了,設置background-repeat: repeat;

CSS background屬性 -小方三防

background-position 設置背景圖片的位置

CSS background屬性 -小方三防

從圖中可以看出,如果直接設置background-position: left;則是左邊居中。


CSS background屬性 -小方三防

如果在后面加上top則會設置到左上角的位置。


CSS background屬性 -小方三防
CSS background屬性 -小方三防
CSS background屬性 -小方三防
CSS background屬性 -小方三防
CSS background屬性 -小方三防
CSS background屬性 -小方三防

從上面幾個圖可以看到,通過background-position: right top;這些語句,可以調整背景圖片的位置。

還有另一種方式就是可以使用像素來進行位置偏移的設定,如下:

CSS background屬性 -小方三防

寫完上來幾個屬性,如果每個都要單獨寫的話就比較費勁,下面介紹一下如何生成一行。

簡寫 background 屬性示例

“background:cyan url(bg.jpg) repeat-x”,橫向平鋪盒子,盒子其他部分顯示背景顏色“cyan”。

CSS background屬性 -小方三防

簡寫如下:

CSS background屬性 -小方三防

“background:cyan url(bg.jpg) repeat-y”,縱向平鋪盒子,盒子其他部分顯示背景顏色“cyan”。

CSS background屬性 -小方三防

background: cyan url(bg.png) no-repeat left top;”,背景不重復,背景和盒子左上角對齊,盒子其他部分顯示背景顏色“cyan”。

CSS background屬性 -小方三防

簡化如下:

CSS background屬性 -小方三防

background: cyan url(bg.png) no-repeat left center;”,背景不重復,背景和盒子左中對齊,盒子其他部分顯示背景顏色“cyan”。

CSS background屬性 -小方三防

background: cyan url(bg.png) no-repeat right center;”,背景不重復,背景和盒子右中對齊,也就是背景圖片的右邊對齊盒子的右邊,盒子其他部分顯示背景顏色“cyan”。

CSS background屬性 -小方三防

背景圖截圖例子說明:

background-position的設置,可以在水平方向設置“left”、“center”、“right”,在垂直方向設置“top”、“center”、“bottom”,除了設置這些方位詞之外,還可以設置具體的數值。

比如說,我們想把下邊的盒子用右邊的圖片作為背景,并且讓背景顯示圖片中靠近底部的那朵花:

CSS background屬性 -小方三防

用上面中間那張圖片作為左邊那個比它尺寸小的盒子的背景,上面右邊的實現效果設置為:“background:url(location_bg.jpg) -110px -150px”,第一個數值表示背景圖相對于自己的左上角向左偏移110px,負值向左,正值向右,第二個數值表示背景圖相對于自己的左上角向上偏移150px,負值向上,正值向下。

實現原理示意圖:

CSS background屬性 -小方三防 CSS background屬性 -小方三防

對應代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 50px auto;

            background-color: cyan;
            background-image: url(location_bg.jpg);
            background-repeat: no-repeat;
            background-position: -107px -153px;

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>


2019年全套Java、Android、HTML5前端、Python、大數據視頻,價值數萬資源大放送

CSS background屬性 -小方三防 CSS background屬性 -小方三防 CSS background屬性 -小方三防

尋找資源的地址如下:

掃描微信公眾號

CSS background屬性 -小方三防

尋找價值數萬的視頻資源

CSS background屬性 -小方三防