css如何讓背景圖片平鋪？ css背景圖片平鋪四種方式介紹
- 不言原創
- 2018-10-08 14:11:1634899瀏覽
在網頁設計的過程中，有時候可能會要求背景圖片平鋪，因為這樣會讓整個網頁看起來比較好看，圖片平鋪可以不用具體設定body寬度和高度大小，就可以直接將圖片平鋪整個頁面，那麼，如何讓背景圖片平鋪呢？接下來這篇文章將要為大家介紹關於css讓背景圖片平舖的方法，有需要的朋友可以參考一下。
我們先來看看css設定背景圖片平鋪方式。
repeat：即預設方式，完全平鋪背景；
no-repeat：在 X及Y軸方向均不平鋪；
repeat-x：橫向平鋪背景;
repeat-y：縱向平鋪背景。
下面我們就來看看css的這四個背景圖片平舖的實作程式碼。
css背景圖片平鋪之完全平鋪背景的程式碼：
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>css背景圖片平鋪效果如下：
css背景圖片平鋪之在X及Y軸方向均不平鋪：
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: no-repeat;
}
</style>
<div id="content">
</div>
</body>
</html>css背景在X及Y軸方向皆不平鋪效果如下：
css背景圖片平鋪之橫向平鋪背景：
#背景圖片現在只在X軸即橫向進行了平鋪操作，縱向並沒有進行平鋪
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-x;
}
</style>
<div id="content">
</div>
</body>
</html>#css橫向平鋪背景效果如下：
css背景圖片平鋪之縱向平鋪背景：
背景圖片現在只在Y軸即橫向進行了平鋪操作，橫向並沒有進行平鋪
<html>
<head>
<style type="text/css">
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/tu.jpg);
background-repeat: repeat-y;
}
</style>
<div id="content">
</div>
</body>
</html>css縱向平鋪背景效果如下：
以上就是這篇文章的全部內容了，更多精彩內容可以追蹤php中文網。
以上是css如何讓背景圖片平鋪？ css背景圖片平鋪四種方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn