溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
css基礎系列教程:背景屬性
我們把上一節的作業的答案給大家公布一下：
1、 h2 .p1{}：表示h2標簽下的所有class為p1的選擇符；
2、 #content h2{}表示id為content下的所有h2標簽；
3、 h2 .p1，#content h2并列關系，對class為p1的和ID為#content下的H1作用同一個效果；
4、 h2#content h3{} 表示h2下id為content標簽下的h3標簽，請注意這個地方不是包含沒有空格而是緊接著寫的。必須是屬于H1里面ID為#content下包含H2的。
使用背景(background)是網頁設計制作中一種常用手法，網站中隨處可見的導航，整體頁面背景都是通過background完成的。
我們先看一下背景的顏色屬性（background-color）,我們可以采用的值：十六進制，顏色名稱，透明的背景.
現在我們通過一個示例來了解一下
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>divcss8背景顏色示例</title>
<style type="text/css">
/*這是CSS的備注形式。為了以后閱讀方便，如果顏色值一樣可以簡寫為#ccc; */
h2 {background-color:#cccccc; }
h3{background-color:red;}
/*是默認效果，可以不寫*/
h4{background-color:trasparent;}
</style>
</head>
<body>
<h2>十六進制示例</h2>
<h3>顏色名稱</h3>
<h4>透明背景</h4>
</body>
</html> PS：顏色值大家可以通過PS去獲取，也可以通過百度搜索獲取
在我們網頁中不只可以使用背景顏色，還可以使用背景圖片屬性background-p_w_picpath定義背景圖象的路徑。但是最好在結合背景圖象的重復屬性background-repeat定義背景圖象的是否重復效果。
最重要的：背景圖象只有在一定的區域范圍內才能顯示，所以在指定背景圖象的時候，通常要定義元素的寬高屬性；
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss.com背景示例</title>
<style type="text/css">
div{background-p_w_picpath:url(3_01.gif); }
</style>
</head>
<body>
<div>內容1</div>
</body>
</html>
現在這種情況下。背景圖片會鋪滿整個屏幕。但是不會有高度顯示
這個問題就是我剛才所重點提到的背景圖象只有在一定的區域范圍內才能顯示.所以說我們可以給DIV指定一個寬(width)與高(height),為了讓大家看的更清楚些。我提供一個邊框。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.divcss.com背景示例</title>
<style type="text/css">
div{background-p_w_picpath:url(3_01.gif); width:500px;height:500px;border:2pxsolid #f00;}
</style>
</head>
<body>
<div>內容1</div>
</body>
</html>
大家不知道發現沒。如果使用我們提供的圖片做背景，會出現完全平鋪。因為我們的背景圖片只有寬184PX，高384PX。這也是默認情況。所以說我們可以通過background-repeat這個屬性決定背景圖片如何平鋪。
background-repeat：是指定元素中背景圖象的重復方式。有以下幾種取值方式：
Repeat:完全平鋪；默認情況下,我們可以忽略不寫
no-repeat：在X與Y均不平鋪；
repeat-x：X平鋪；
repeat-y：Y軸平鋪；
大家可以對上述代碼做個修改。
background-position：設置背景圖片在一定區域內的顯示的位置，這個屬性需要設置兩個值，一個是X水平，一個垂直位置，可以使用%，也可使用具體的數值PX，也可以使用：top left|top center |top right | center left | bottom left這樣結合
我們看一個示例：
<html>
<head>
<style type="text/css">
div
{
width:400px;height:400px;border:2px solid#f00;
background-p_w_picpath:url(css8bj.jpg);
background-repeat:no-repeat;
background-position:top right;
}
</style>
</head>
<body>
<body>
<div>
<p>在這個示例的圖片寬是208px，高是120px，在我們不平鋪的時候，默認是DIV的左上角，如果按我們樣式所設置則在頂部右上角，當然你也可以使用百分比和PX值進行</p>
</div>
</body>
</body>
</html>
在上述代碼情況下如果我們想讓我們上邊的背景圖片不顯示第一行與第一列怎么辦呢。我們還可以為背景位置設置負的值
<html>
<head>
<style type="text/css">
div
{
width:400px;height:400px;border:2px solid#f00;
background-p_w_picpath:url(css8bj.jpg);
background-repeat:no-repeat;
background-position:-73px -38px;
}
</style>
</head>
<body>
<body>
<div>
<p>在這個示例的圖片寬是208px，高是120px，在我們不平鋪的時候，默認是DIV的左上角，73px -38px，我們使用負的值是為了向左偏移以及向上偏移</p>
</div>
</body>
</body>
</html>
而且我們的背景圖片也可以結合顏色在一塊來用，當背景圖片沒有顯示的時候就用顏色進行填充。我們現在看一個示例。
<html>
<head>
<style type="text/css">
body
{
background-p_w_picpath:url(divcss801.gif);
background-repeat:repeat-x;
background-position:0 0
background-color:#055269;
}
</style>
</head>
<body>
<body>
<div>
<p>我們網頁背景沿X軸平鋪的時候，如果沒有占滿其它地方可以用背景顏色代替</p>
</div>
</body>
</body>
</html>
這個地方的背景顏色取值是根據背景圖片決定的。大家可以用PS看一下這個背景圖片最下方的顏色是不是我們現在使用的。
我們學了之前這么多內容，其實背景還可以簡寫，形式如下：
Background:background-color顏色 |background-p_w_picpath背景圖片路徑 | background-repeat 是否平鋪 | background-position 位置|background-p_w_upload 是否滾動
強調一下：在使用簡寫的時候必須是Background，如果是用bakcground-p_w_picpath:只能寫圖片位置，不能再加其它。那么我看一個示例
<html>
<head>
<style type="text/css">
body
{
background:#055269 url(divcss801.gif)repeat-x 0 0;
}
</style>
</head>
<body>
<body>
<div>
<p>我們的背景沿X軸平鋪的時候，如果沒有占滿其它地方可以用背景顏色代替</p>
</div>
</body>
</body>
</html>
http://www.divcss8.com/csskan.aspx?NewsID=7
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
