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

來源:互聯網
上載者:User
有的網站頁面中如果加入好看的背景圖片是更能夠令人信服的,可是我們該怎麼進行網頁背景圖片設定呢?而且通常會被要求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背景圖縱向平鋪程式碼範例:

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

效果如:

三、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背景平鋪等相關知識。希望對有需要的朋友有所協助。

註:

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

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

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

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

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.