怎麼用CSS語法讓背景固定?

有沒有辦法用CSS語法讓背景固定

像這樣http://www.pixnet.net/amandachang

我的語法是這樣:

body

{

background:url("http://tw.yimg.com/i/tw/ks/ks_masthead.gif%22);

text-align:center;

font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;

font-size : 12px;

margin: 0px;

text-align:center;

}

Update:

滾動滾輪的時候,背景不會動

3 Answers

Rating
  • Anonymous
    2 decades ago
    Favorite Answer

    *置中背景

    <style type="text/css">

    <!--

    BODY{

    background-image : url(圖的位置);

    background-repeat : no-repeat;

    background-attachment : fixed;

    background-position :50% 50%;

    }

    -->

    </style>

     *上面重複

    <STYLE type="text/css">

    <!--

    BODY{

     background-image:url(圖址);

    background-repeat : repeat-x;

    background-attachment : fixed;

    }

    -->

    </STYLE>

     *左邊重複

    <STYLE type="text/css">

    <!--

    BODY{

    background-image:url(圖址);

    background-repeat : repeat-y;

    background-attachment : fixed;

    background-position : left top;

    }

    -->

    </STYLE>

     *右邊重複

    <STYLE type="text/css">

    <!--

    BODY{

    background-image:url(圖址);

    background-repeat : repeat-y;

    background-attachment : fixed;

    background-position : right top;

    }

    -->

    </STYLE>

     *右下背景

    <style type="text/css">

    <!--

    BODY{

    background-image : url(圖址);

    background-repeat : no-repeat;

    background-attachment : fixed;

    background-position :100% 100%;

    }

    -->

    </style>

     *右上背景

    <style type="text/css">

    <!--

    BODY{

    background-image : url(圖址);

    background-repeat : no-repeat;

    background-attachment : fixed;

    background-position :100% 0%;

    }

    -->

    </style>

     *左上背景

    <style type="text/css">

    <!--

    BODY{

    background-image : url(圖址);

    background-repeat : no-repeat;

    background-attachment : fixed;

    background-position :0% 0%;

    }

    -->

    </style>

     

     *左下背景

    <style type="text/css">

    <!--

    BODY{

    background-image : url(圖址);

    background-repeat : no-repeat;

    background-attachment : fixed;

    background-position :0% 100%;

    }

    -->

    </style>

     *左中背景

     

    <style type="text/css">

    <!--

    BODY{

    background-image : url(圖址);

    background-repeat : no-repeat;

    background-attachment : fixed;

    background-position :0% 50%;

    }

    -->

    </style>

    全都幫你弄好~

    Source(s): 我。
  • Anonymous
    2 decades ago

    <style type=text/css>

    <!--

    body{

    background-image : url(圖片網址);

    background-position :100% 100%;

    background-repeat : no-repeat;

    background-attachment : fixed;

    }

    -->

    </style>

    100%請自行更改~

    100% 100% ------>圖片在最右下方

  • 2 decades ago

    如何加入CSS語法

    1、直接定義在原有的html標籤內,

    利用 style,例如將語法加入原有標籤<font>內

    寫法:

    <font style="CSS語法">

    在上面範例提到的CSS 語法就是接下來幾章要介紹的,

    他每一個參數都有相對應的功能,對於不同功能的參數,我

    們就用分號 ; 分開

    寫法:

    <font style="font-size:20px ; font-weight:bold">

    經過這樣的設定,夾在<font>...</font>這個標籤內文字的樣式,

    就會依照設定來呈現。

    --------------------------------------------------------------------------------

    2、在<head>與</head>之間宣告

    (1)依附標籤

    寫法:

    <style type="text/css">

    font {CSS語法}

    </style>

    往後我們只要一使用到<font>這個標籤,設定將自動被套用。

    如果要套用到很多個標籤的話,只要用逗號 , 分開就可以了

    例如:

    font,td,h1 {CSS語法}

    往後我們只要一使用到<font>、<td>、<h1>這些標籤,設定將自動被套用。

    (2)先給名字再呼叫

    舉例來說:

    <style type="text/css">

    .title {CSS語法}

    </style>

    我們已經將設定命名為title了,那想套用的時候,就用class呼叫它。

    呼叫:

    <font class="title">

    該<font>...</font>標籤內的所有元件,將會套用名字叫做title的設定。

    (3)先給名字再呼叫(id)

    舉例來說:

    <style type="text/css">

    #title {CSS語法}

    </style>

    我們已經將設定命名為title了,那想套用的時候,就用id呼叫它。

    呼叫:

    <font id="title">

    --------------------------------------------------------------------------------

    3、先利用前面介紹的第兩種方法,將CSS 語法設定給寫好,然後將它存檔,副檔名

    存成css,(要注意的是這個css檔裡面的內容,就是單純的css語法,並不用摻雜

    html語法) 然後我們要呼叫它的時候,只要在網頁裡面加上一行

    <link rel=stylesheet type="text/css" href="xxx.css">

    那效果相當於是這些設定已經寫入你的網頁內。

    如果你有好幾份網頁要套用相同的設定,

    那你只要寫一個css檔,就可以套用到全部的網頁。

    範例:xxx.css 的內容

    <style type="text/css">

    body,td {font-size:9pt ; color:red}

    </style>

    background-image(設定背景圖片)

    寫法:

    background-image:url(xxx.jpg)

    同樣的,每一個元件都可以有自己的背景圖片。

    --------------------------------------------------------------------------------

    background-position(設定背景圖片的位置)

    寫法:

    Background-position:75% 25%

    寫法:

    Background-position:75px 25px

    跟上一個表示法類似,只是將位置直接用像素指定。

    寫法:

    background-position:right top

    X方向可以指定為left(0%)、center(50%)、right(100%)

    Y方向可以指定為top(0%)、center(50%)、bottom(100%)

    --------------------------------------------------------------------------------

    background-attachment(設定背景是否固定)

    可以利用這個方法,讓背景圖片不隨著捲軸的捲動而移動位置。

    寫法:

    background-attachment:scroll

    可以指定為scroll(一般效果)、fixed(固定不動)

    --------------------------------------------------------------------------------

    background(background家族總管)

    上面所介紹的所有background語法,我們可以用它來一次設定完畢。

    原寫法: {background-color:red;background-repeat:repeat}

    總管寫法:{background:red repeat}

    在不同的設定之間加一個空白鍵就可以了

Still have questions? Get your answers by asking now.