首頁  >  文章  >  web前端  >  html怎麼加入背景圖片且讓圖片平鋪整個頁面? (程式碼範例)

html怎麼加入背景圖片且讓圖片平鋪整個頁面? (程式碼範例)

藏色散人
藏色散人原創
2018-08-11 16:47:26151529瀏覽

有的網站頁面中如果加入好看的背景圖片是更能夠引人注目的,可是我們該怎麼進行網頁背景圖片設定呢?而且通常會被要求html背景圖片平舖的展現效果。這對於稍懂一些html/css知識的朋友來說應該並不是難事。那麼本篇文章主要針對新手朋友們,來詳細介紹html背景圖的新增使用方法。可供大家參考。

一、html背景圖橫向平鋪程式碼範例:

<style type="text/css">
    body{
        font-size:12px;
        font-family:"宋体";
        background-image:url(2.png);
        background-repeat:repeat-x;
        COLOR: #0C2B30;
    }
</style>

效果如下圖:

html怎麼加入背景圖片且讓圖片平鋪整個頁面? (程式碼範例)

二、html背景圖縱向平鋪程式碼範例:

    body{
        font-size:12px;
        font-family:"宋体";
        background-image:url(2.png);
        background-repeat:repeat-x;
        COLOR: #0C2B30;
    }

效果如下圖:

html怎麼加入背景圖片且讓圖片平鋪整個頁面? (程式碼範例)

##三、html圖片全螢幕程式碼範例:

html,body{
    width: 100%;
    height: 100%;
}
.mui-content{
    background: url(2.png) bottom center no-repeat #efeff4 ;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}

效果如下圖:

html怎麼加入背景圖片且讓圖片平鋪整個頁面? (程式碼範例)

#那麼以上給大家總結了關於怎麼讓html設定背景圖片、html背景平鋪等相關知識。希望對有需要的朋友有幫助。

註:


background 簡寫屬性在一個宣告中設定所有的背景屬性。

background-size 屬性規定背景圖像的尺寸。

background-repeat 屬性設定是否及如何重複背景影像。預設的背景影像在水平和垂直方向上重複。

background-image 屬性為元素設定背景圖像。

元素的背景佔據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距。預設地,背景圖像位於元素的左上角,並在水平和垂直方向上重複。


以上是html怎麼加入背景圖片且讓圖片平鋪整個頁面? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn