<output id="jbxdv"></output>

      1. 定義背景圖片的位置

        • 2020-01-02 14:46:01
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        默認情況下,背景圖片都是從設置了back-ground屬性的標記的左上角開始出現,但實際制作網頁過程中,可能希望圖片出現在指定的位置。在CSS中使用background-position來調整圖片的位置,該屬性用法如下:

        background-position: position|數值

        網頁設計中,position可以是center、center center、top left、top center、top right、center left、cen-ter right、bottom left、bottom center、bottomright;數值可以是百分數,如background-posi-tion:40% 60%,表示背景圖片的中心點在網頁設計時水平方向上處于40%的位置,在豎直方向上處于60%的位置,此時如果改變瀏覽器的大小,背景圖片也會相應地調整,但始終處于40%和60%的位置,除了百分數,還可以是具體的數值,如background-posi-tion:200px 40px,表示距離頁面左側200px,距離頁面頂部40px,但是此時如果瀏覽器大小改變,圖片不會做出相應調整,可能會出現圖片顯示不全的現象。

        【示例】啟動Dreamweaver,新建一個網頁,保存為test.html,在<head>標簽內添加<styletype="text/css">標簽,定義一個內部樣式表,然后輸入下面樣式:

        body{ /*頁面基本屬性*/    padding:0px;

        margin:0px;    

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

        background-repeat:no-repeat;          /*不重復*/    

        background-position:bottom right;     /*背景位置,右下*/    

        background-color:#0066CC;}p{ /*段落樣式*/    

        line-height:1.6em;    

        margin:0px; font-size:14px;    

        padding-top:10px;    

        padding-left:6px; 

        padding-right:8px;}

        然后在<body>標簽中輸入如下代碼:

        <h1>可愛的企鵝</h1>

        <p>去南極,第一個想到的就是企鵝,那毛茸茸的肉嘟嘟的樣子非??蓯?。我們第一次登陸就是去看它,興奮的心情和期待的心情交織在一起,但是,真正踏上南極半島的一瞬間不是因為看到企鵝而興奮,而是因為企鵝在自己的腳邊而驚訝?!?lt;/p>

        顯示結果如圖所示。從圖中可以看出,圖片位于頁面右下方。

        4e7c7ce6d867aa732b563f86fd855eb5.jpg

        當前文章標題:定義背景圖片的位置

        當前URL:http://www.freenetsites.com/news/wzzz/3152.html

        上一篇:網頁設計中背景圖片的重復

        下一篇:在網頁設計中設置帶花紋邊框(一)

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>