<center id="iyacc"><source id="iyacc"></source></center>
  • <center id="iyacc"></center>
  • 
    
  • <ul id="iyacc"><delect id="iyacc"></delect></ul>
  • <strike id="iyacc"><code id="iyacc"></code></strike>
    <strike id="iyacc"><code id="iyacc"></code></strike>
  • <center id="iyacc"><dd id="iyacc"></dd></center><ul id="iyacc"><delect id="iyacc"></delect></ul>

    用CSS控制背景圖像

    • 2019-12-27 15:44:20
    • 閱讀次數(shù):
    • 作者:盈嵐科技小編
    • 來源:http://m.ww44088.com

    網(wǎng)頁設(shè)計(jì)時(shí),CSS可設(shè)置背景圖片的樣式。任何一個(gè)頁面,都有它的背景色或背景圖來突出其基調(diào),本節(jié)將通過實(shí)例介紹背景圖片的樣式設(shè)置。

    定義背景圖片

    CSS使用background-image屬性來定義背景圖片樣式,在網(wǎng)站建設(shè)時(shí),該屬性用法如下:

    background-image: url;

    其作用是給頁面添加背景圖片,其中url是圖片的路徑,可以是絕對路徑,也可以是相對路徑。導(dǎo)入的圖片其默認(rèn)屬性是在橫向和縱向上重復(fù),如果不希望重復(fù),則需要設(shè)置no-repeat屬性,其具體用法會(huì)在下面講到。

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

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title></title>

    <title>背景圖片</title>

    <style>body { background-image: url(images/bg.jpg);     /*頁面背景圖片*/ }

    </style>

    </head>

    <body>

    </body>

    </html>

    以上代碼中,圖片默認(rèn)會(huì)在橫向和縱向上重復(fù),本例中圖片的原型如圖9.85所示。其在網(wǎng)頁中平鋪的效果如圖9.86所示。

    如果在設(shè)計(jì)網(wǎng)頁時(shí)使用的背景圖片是GIF格式的透明圖片,那么此時(shí)如果再設(shè)置網(wǎng)頁的背景顏色background-color,則背景圖片和背景顏色將同時(shí)生效。

    1.jpg


    2.jpg

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

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title></title>

    <title>背景圖片</title><style>body {

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

    background-color: #A7D3A0;             /*頁面背景顏色*/}

    </style>

    </head>

    <body>

    </body>

    </html>

    其顯示結(jié)果可以看到淡綠色的背景顏色和背景圖片同時(shí)顯示在網(wǎng)頁中。

    當(dāng)前文章標(biāo)題:用CSS控制背景圖像

    當(dāng)前URL:http://m.ww44088.com/news/wzzz/3150.html

    上一篇:Banner實(shí)例展示

    下一篇:網(wǎng)頁設(shè)計(jì)中背景圖片的重復(fù)

    網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號)
    亚洲bt欧美bt中文字幕,囯产剧情亚洲精品无码一页,国产欧美va欧美va香蕉在,国产激情久久99久久 亚洲国产视频95 婷婷六月在线视频中文字幕
    <center id="iyacc"><source id="iyacc"></source></center>
  • <center id="iyacc"></center>
  • 
    
  • <ul id="iyacc"><delect id="iyacc"></delect></ul>
  • <strike id="iyacc"><code id="iyacc"></code></strike>
    <strike id="iyacc"><code id="iyacc"></code></strike>
  • <center id="iyacc"><dd id="iyacc"></dd></center><ul id="iyacc"><delect id="iyacc"></delect></ul>