- 摩刻部落 - https://www.moke.tw/wordpress -

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

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

屬性名稱

background-size [2](背景大小)、background-origin [3](背景原點)、background-clip [4](背景區域)

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
回到【屬性名稱】 [5]

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
回到【屬性名稱】 [5]

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;
}

【結果】

回到【屬性名稱】 [5]