玩Web無窮(Enjoy Web Tech): CSS基礎教學(11)--背景的綜合設定

在寫完背景設定後, 漏掉了這篇綜合設定 ^_^"

在許多的 CSS 屬性中, 都能將相關的屬性整合在一個屬性上做設定, 例如之前提過的 font 屬性, 即可設定字體大小、字型、粗斜體...等等的樣式, 而在背景中, 我們也看到了有許多跟背景有關的屬性

background-color
background-image
background-repeat
background-position
background-attachment

這些我們都可以單用 background 這個屬性來做設定, 語法如下

background: [ background-color || background-image || background-repeat || background-attachment || background-position ] | inherit ;

每個屬性值用空格隔開, 順序不限
背景色跟背景圖可以同時設定, 不過必須圖片不會佔滿整個範圍, 才看得見背景色
而跟背景圖有關的屬性值, 就要有設定背景圖才看得出效果

例如

<HTML>
<BODY>
<TABLE width="100%" height="100%" border="1">
	<TR>
		<TD width="50%" style="
			background:yellow;
			">&nbsp;</TD>
		<TD width="50%" style="
			background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg);
			">&nbsp;</TD>
	</TR>
	<TR>
		<TD width="50%" style="
			background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg)
						no-repeat;
			">&nbsp;</TD>
		<TD width="50%" style="
			background:no-repeat
						url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg);
			">&nbsp;</TD>
	</TR>
	<TR>
		<TD width="50%" style="
			background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKv4ebj-ZuyHe8dEmIfJZalgUxcwuoQ28I4XknG4cVQnxFUxnXLK3XoTyTEQqVF93ty6cOuySmROWtXVCrnethWjIaYV7lKFMDkhsozsIZOu68NHH1VU9jFWxKsvhpevhklkQqUIXyYKY/s1600/logo.jpg)
						no-repeat
						yellow;
			">&nbsp;</TD>
		<TD width="50%" style="
			background:yellow no-repeat;
			">&nbsp;</TD>
	</TR>
</TABLE>
</BODY>
</HTML>

--gs--
{CSS基礎教學}{背景}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。

最新文章

追蹤我的朋友

CSS基礎教學(11)--背景的綜合設定

0 意見:

張貼留言

搜尋此網誌

最新回應

文章分類

更多的文章在這裡