close


請問以下網頁
http://eem.pcc.gov.tw/eem/student/index0.htm
綠色的背景部份 怎麼做出來的?
為何可以做出由深到淺的感覺
謝謝~




  • 2007-01-12 15:20:28 補充


    將此圖設為網頁的全版面?再設為影像背景嗎? 這樣整個檔案會不會太大 不然為何要切割圖片呢?
    我上課時老師說這是css的語法做的?
    畫完漸層 設好背景就好了嗎
    和css有關係嗎





er">




看了一下發問者提供的網站,把原始碼下載之後發現


這個網頁主要分為三區塊,第一塊是上面的"生態工程學生版"、第二塊是左邊的"回首頁"、"認識生態工程"...,第三塊是MAIN主頁。


其中在MAIN主頁裡有包夾了一個名為child_style.css的檔案,第一段寫了BODY {
 <!--MARGIN-TOP: 0px; SCROLLBAR-FACE-COLOR: #e0f2b3; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(images/main_bg2.jpg); MARGIN-LEFT: 0px; SCROLLBAR-ARROW-COLOR: #fff; BACKGROUND-REPEAT: no-repeat; SCROLLBAR-BASE-COLOR: #e0f2b3; BACKGROUND-COLOR: #e0f2b3-->
}
,把這行拿掉之後發現網頁背景色的確不見了,所以可以確定我們看到的綠色漸層背景是由這行指令控制的。


另外,這個網頁很多圖片的確有做割圖,也就是你講的,因為檔案太大所以把圖片切割加快瀏覽速度。


註:開啟這個網站後可以按檔案,另存新檔把整個網頁載下來看,會更清楚,開啟main頁的child_style.css檔案,自己任意修改BODY{}裡的設定,會更清楚這些指令的意義。


分析了這行指令,簡單說明如下


MARGIN-TOP: 0px; 網頁從最上方間距0的地方開始顯示
BACKGROUND-ATTACHMENT: fixed; 背景圖固定
BACKGROUND-IMAGE: url(images/main_bg2.jpg); 背景圖來源←應該就是那張白綠漸層圖
MARGIN-LEFT: 0px; 網頁從最左方間距0的地方開始顯示
BACKGROUND-REPEAT: no-repeat; 背景圖不重複
BACKGROUND-COLOR: #e0f2b3 網頁背景色




參考資料
二姐





arrow
arrow
    全站熱搜
    創作者介紹
    創作者 lulu78g056 的頭像
    lulu78g056

    {我可能不会爱你}

    lulu78g001 發表在 痞客邦 留言(0) 人氣()