【CSS學習】--- 背景

時間 2019-11-19

標籤 CSS學習背景欄目 CSS 简体版

原文原文鏈接

1、前言

　　元素的背景區域包括：元素的內容、內邊距和邊框區域。css

　　CSS中用於設置背景的屬性有：

background-color	設置背景顏色
background-image	設置背景圖片
background-repeat	設置是否以及如何重複背景圖像
background-position	設置背景圖的開始位置
background-attachment	設置背景圖像是否固定或者隨着頁面的其他部分滾動
background	簡寫屬性，做用是將全部屬性值寫在一個聲明中

　背景屬性默認都不繼承。下面咱們來逐步學習設置背景的各個屬性。html

2、背景顏色：background-color

　　background-color 屬性爲元素設置一種純色背景。瀏覽器

屬性值：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 100px;
            line-height: 100px;
            border: dashed 10px black;
            background-color: #FFCCCC;
        }
    </style>
</head>
<body>
    <div>虛線之間也填充了背景色！</div>
</body>
</html>

background-color

3、背景圖片：background-image

　　 background-image 屬性爲元素設置背景圖像。默認地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。ide

　　建議同時設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可得到良好的視覺效果。學習

屬性值：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        .one{
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            line-height: 100px;
            background-image: url(http://h5ip.cn/ybPo);
        }        
        .two{
            width: 200px;
            height: 100px;
            line-height: 100px;
            background-image: url(隨便了);
            background-color: #FFCCCC;
        }
    </style>
</head>
<body>
    <div class="one">背景是趙麗穎哦。</div>
    <div class="two">圖沒了，但還有背景色！</div>
</body>
</html>

background-image

4、背景重複：background-repeat

　　 background-repeat 屬性設置是否及如何重複背景圖像。默認地，背景圖像在水平和垂直方向上重複。測試

屬性值：

栗子：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            div{
                width: 200px; 
                height: 50px;
                background-image: url(images/background.jpg);
                margin-bottom: 20px;
                border: solid 1px black;
            }
            .no-repeat{background-repeat: no-repeat;}
            .repeat{background-repeat: repeat;}
            .repeat-x{background-repeat: repeat-x;}
            .repeat-y{background-repeat: repeat-y;}
        </style>
    </head>
    <body>
        <div class="no-repeat">
            不重複no-repeat
        </div>        
        <div class="repeat" ">
            重複repeat
        </div>       
        <div class="repeat-x">
            x上重複repeat-x
        </div>        
        <div class="repeat-y">
            y上重複repeat-y
        </div>
    </body>
<html>

test background-repeat

5、背景定位：background-position

　　background-position 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像的位置，背景圖像若是要重複，將從這一點開始。url

　　提示：1.您須要把 background-attachment 屬性設置爲 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工做。spa

　　　　　2.若是隻設置background-position而不設置background-repeat，則背景圖片仍是會填充整個元素。3d

屬性值：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        .one{
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            line-height: 100px;
            border: dashed 5px black;
            background-image: url(images/background.jpg);
            background-position: bottom right;
            background-repeat: no-repeat;
        }        
        .two{
            width: 200px;
            height: 100px;
            line-height: 100px;
            border: dashed 5px black;
            background-image: url(images/background.jpg);
            background-position: bottom right;
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="one">設置no-repeat</div>
    <div class="two">設置repeat-y</div>
</body>
</html>

background-position

咱們發現當位置爲bottom right時（第一個圖所示）,背景圖並無填充邊框區域，而設置repeat-y以後（第二個圖所示），背景圖只填充了上下邊框區域。這是由於background-position的屬性值都是相對邊框而言的（不包含邊框），但設置repeat屬性後能夠填充邊框。

6、背景附加方式：background-attachment

　　 background-attachment 屬性設置背景圖像是否固定或者隨着頁面的其他部分滾動。code

屬性值：

其中fixed只是相對於該元素固定，當整個元素上滑後，背景天然也就滑出了界面。您能夠嘗試設置了指定高度的元素，例以下面第一個代碼test：

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            height: 700px;
            border: solid 1px black;
            background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
            background-repeat: repeat-x;
            background-attachment: fixed;
        }        
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>        
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>        
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
    </div>
</body>
</html>

test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
            background-repeat: repeat-x;
            background-attachment: fixed;
        }        
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>        
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>        
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
    </div>
</body>
</html>

fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .one{
            background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3272553420,1572414492&fm=27&gp=0.jpg);
            background-repeat: repeat-x;
        }        
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>        
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>        
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
        <p>試着往下滾動鼠標</p>
    </div>
</body>
</html>

默認scroll，滾動

建議複製上面兩個代碼，提交到W3School測試，點我傳送！

7、快捷方式：background

　　background 簡寫屬性在一個聲明中設置全部的背景屬性。能夠設置以下屬性：

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

若是不設置其中的某個值，也不會出問題，設置順序也沒有要求。

一般建議使用這個屬性，而不是分別使用單個屬性，由於這個屬性在較老的瀏覽器中可以獲得更好的支持，並且須要鍵入的字母也更少。

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        div{
            width: 225px;
            border: solid 1px black;
            background: gray url(images/background.jpg) top repeat-x fixed;
        }
        p{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</body>
</html>