CSS background

Posted on 2015-07-04 Edited on 2023-11-24 In CSS Views: Disqus:

background屬性提供了color、image、repeat、attachment、position五種效果可用

一、Color

1、background-color就是背景色，跟文字的color可是有區別的喔。

2、background-color可以指定為Hex、RGB、color name等樣式來表示，

詳細的顏色表示樣式請參考CSS Legal Color Values，

3、另外於CSS3還支援了透明度opacity，值範圍介於0(透明)~1(不透明)之間，

範例：

#p1 {
    background-color: rgb(255,0,0);
    opacity: 0.6;
}

4、不管是background-color或是background-image，

在Box model所影響的範圍將會包含padding範圍。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="Brookes">
    <meta name="copyright" content="Brookes">
    <title>Brookes</title>
    <style>
        div:nth-of-type(1) {
            background: yellow;
            border: 1px solid red;
            padding: 20px;
            width: 100px;
            text-align: center;
        }

        div:nth-of-type(2) {
            background: yellow;
            border: 1px solid red;
            width: 100px;
            text-align: center;
            margin: 5px 0 0 0;
        }
    </style>
</head>
<body>
    <div>padding: 20px</div>
    <div>no padding</div>
</body>
</html>

JS Bin on jsbin.com

二、image

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("http://i.imgur.com/ysp9Ifm.png?1");
        }
    </style>
</head>
<body>

    <h1>Hello World!</h1>

</body>
</html>

1、background-image的用法範例如上，須注意的是，

預設是repeat樣式。

2、Multiple background：

於CSS3的規格中加入可支援顯示多重圖片功能，

第一個被指定的圖片將是所有圖片的最上方。

範例：

background-image: url(img_flwr.gif), url(paper.gif);

三、repeat

background-repeat預設的動作為對水平與垂直方向做repeat，

但其實可以針對特定的水平或垂直方向做repeat，

例如：

水平repeat為background-repeat : repeat-x

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("http://i.imgur.com/ysp9Ifm.png?1");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>

    <h1>Hello World!</h1>

</body>
</html>

垂直repeat為background-repeat-y

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("http://i.imgur.com/ysp9Ifm.png?1");
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>

    <h1>Hello World!</h1>

</body>
</html>

如果不想重複秀圖片則使用background-repeat : no-repeat

background-repeat的值有四種分別是：repeat、no-repeat、repeat-x、repeat-y

四、attachment

用來決定圖片如何呈現於一個頁面上，

有三種方式分別是scroll、fixed、local

fixed的作用為該圖案絕對固定在螢幕的指定位置上，

scroll的作用為該圖案只受最外圍的卷軸所影響而跟著捲動圖片，

local的作用為該圖案除了受最外圍的卷軸所影響而跟著捲動圖片外，

也可根據內圍獨立地捲動圖片。

JS Bin on jsbin.com

五、position

預設值為background-position: left top;，

表示靠左靠上，第一個值管左右方向，第二個值管上下方向，

值可以為left、right、top、bottom、center、%、px

例如：background-position: 10px 30px;，

代表圖片從左上角原點位置由左向右推10px，由上往下推30px。

其主要用法代表整個圖片在該block或inline偏移了多少

範例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        #demoDIV {
            margin-left: 10px;
            margin-top: 3px;
            margin-right: 15px;
            background-color: #ffffff;
            border: 1px solid #c3c3c3;
            height: 280px;
            background-image: url('http://www.w3schools.com/cssref/smiley.gif');
            background-repeat: no-repeat;
            background-position: left top;
        }
    </style>

</head>
<body>
    <div id="demoParent">
        <div id="demoDIV" style="background-position: 10px 200px;"></div>
    </div>
</body>
</html>

範例2：

<!DOCTYPE html>
<html>
<head>
    <style>
        #navlist {
            position: relative;
        }

            #navlist li {
                margin: 0;
                padding: 0;
                list-style: none;
                position: absolute;
                top: 0;
            }

            #navlist li, #navlist a {
                height: 44px;
                display: block;
            }

        #home {
            left: 0px;
            width: 46px;
            background: url('http://www.w3schools.com/css/img_navsprites.gif');
            background-position: 0 0;
        }

        #prev {
            left: 63px;
            width: 43px;
            background: url('http://www.w3schools.com/css/img_navsprites.gif');
            background-position: -47px 0;
        }

        #next {
            left: 129px;
            width: 43px;
            background: url('http://www.w3schools.com/css/img_navsprites.gif') -91px 0;
        }
    </style>
</head>
<body>
    <ul id="navlist">
        <li id="home"><a href="default.asp"></a></li>
        <li id="prev"><a href="css_intro.asp"></a></li>
        <li id="next"><a href="css_syntax.asp"></a></li>
    </ul>
</body>
</html>

六、background簡寫

shorthand的語法為

background: color image position/size repeat origin clip attachment initial|inherit;

例如：background: #00ff00 url("smiley.gif") no-repeat fixed center;

七、而background還有新增CSS3語法的外加屬性如：

background-origin、'background-clip、background-size、

linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient

1、background-origin

用來指定background-image的放置邊界要從哪裡開始，

值可為content-box、padding-box(預設值)、border-box

2、background-clip

用來指定background-color的放置邊界(繪圖邊界)要從哪裡開始，

值可為content-box、padding-box、border-box(預設值)，

另外之前看到有人使用以下設定

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

功能說是可以讓文字顯示成背景圖片，我還沒試過，

恩，很新奇的功能喔~

3、background-size

預設值為auto，指圖片包含原始的寬高。

注意，background-size屬性不可單獨使用，否則沒作用。必須要background屬性一起搭配才行。

3-1、background-size可以讓你指定圖片的大小，

一旦你指定好圖片大小後，原始圖片會自動縮放成你所指定的大小。

範例：

background-size: 100px 80px;

background-size: 100% 100%;

3-2、而background-size的值還可以為contain與cover

contain會將整張圖片納入顯示範圍，但部分範圍可能會有留白的地方，

cover會將整個顯示範圍填滿，但可能圖片某一部分會被裁切。

參考資料：

background-attachment