CSS3與濾境(7)-背景控制

相關語法請參考:「CSS排版程式(4)-顏色與背景

屬性名稱

background-size(背景大小)、background-origin(背景原點)、background-clip(背景區域)

background-clip

說明:設定背景繪圖的區域。

屬性值:padding-box、border-box、content-box

【範例】

.box {
    width:100px;
    height:50px;
    padding:10px;
    border:1px solid gray;

    background:yellow;
    background-clip:content-box;        /* 不支援IE8以前瀏覽器 */
    -webkit-background-clip:content-box;    /* Chrome、Safari 使用的語法 */
}

【結果】

background-clip

background-origin

說明:設定背景圖 background-position 屬性參考的依據(原點位置)。

屬性值:padding-box、border-box、content-box

【範例】

.box {
    width:100px;
    height:50px;
    border:1px solid;
    padding-left:40px;

    background:url(https://lh5.googleusercontent.com/-MWVwjvDLsfU/TcTIoKK0kGI/AAAAAAAACio/OSdir5JzdNM/book1.gif);
    background-repeat:no-repeat;
    background-origin:padding-box;      /* 不支援IE8以前瀏覽器 */
    -webkit-background-origin:padding-box;  /* Chrome、Safari 使用的語法 */
}

【結果】

background-origin

background-size

說明:改變背景圖案的大小。

屬性值:(長度)、(百分比)、cover(放大至整個區域)、contain(縮小至符合區域)

【範例】

.box {
    width:100px;
    height:80px;
    border:1px solid gray;

    background:url(https://lh6.googleusercontent.com/-ZUNEr6tL-TU/TEwRvWxs0nI/AAAAAAAABV0/g1gUVCO_u-4/omew.jpg);
    background-size:50px 50px;      /* 不支援IE8以前瀏覽器 */
    -moz-background-size:50px 50px;     /* Firefox 使用的語法 */
    background-repeat:no-repeat;
}

【結果】