網(wǎng)頁設計中背景圖片的重復

  • 2019-12-31 10:35:50
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

網(wǎng)頁設計中,CSS使用background-repeat屬性來定義背景圖片的重復,該屬性用法如下:

background-repeat:repeat-x|repeat-y|no-repeat

background-repeat屬性的3個取值作用如下。   

?repeat-x:圖片在x軸方向上重復。

?repeat-y:圖片在y軸方向上重復。   

?no-repeat:不平鋪,圖片只顯示一次。

【示例】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,輸入以下內(nèi)容:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>body {    

background-image: url(images/bg.jpg);     /*頁面背景圖片*/    

background-repeat: repeat-y;              /*頁面背景圖片縱向重復*/}

</style>

</head>

<body>

</body>

</html>

顯示結果如圖1所示,背景圖片在設計網(wǎng)頁時縱向上進行了重復顯示。背景的原圖如圖2所示。其實際高度為1像素,這里為了讓讀者看得清楚,因此將其放大了。

提示:網(wǎng)站建設時,如果是要設置兩個方向上的平鋪,就不需要設置屬性值,這時CSS會采用默認的向橫向和縱向兩個方向重復的效果。但是,如果手動地設置repeat-x和repeat-y的兩個值的話,那么系統(tǒng)會自動認定后設的一種平鋪方式有效,只會向一個方向平鋪。

當前文章標題:網(wǎng)頁設計中背景圖片的重復

當前URL:http://m.supportcoffeeroasters.com/news/wzzz/3151.html

上一篇:用CSS控制背景圖像

下一篇:定義背景圖片的位置

網(wǎng)站建設、網(wǎng)絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)