您現在的位置: 365建站網 > 365學習 > 用CSS來控制網頁背景

用CSS來控制網頁背景

文章來源:365jz.com     點擊數:173    更新時間:2015-09-16 20:10   參與評論
 我想大家常常為一些比較合適于自己的網頁背景的圖片而發愁吧,這個我想也是有的,因為這些圖片不是太大就是太小,或者太亂,那么有沒有辦法讓圖片能合自己的主頁的胃口呢?答案是肯定的。想知道怎么來實現嘛,好吧,大家現在開始跟著我做,我保證大家一定一學就會。不過,我想在網上“成家”的朋友一般分為在網吧里“開業”(就像我一樣,剛開始從他人的主頁拉相關的代碼來改的),還有就是在自己家里用DW或FP之類的專業軟件制作好上傳的,所以呢,我打算分開兩步介紹,首先為在網吧里“開業”的朋友著想吧,最后再簡要的介紹一些用DW4做的背景樣式。其實總得說來一切都是一樣的,只不過是采用的方式不同罷了。好了閑話少說了,現在就入正題吧。

     說到背景也就只有背景顏色和顏色圖片,這兩個我想大家一定都知道在里加入bgcolor="#808080"和background="URL"對吧,可是我這里將要介紹不是這樣做的,而是用CSS樣式來做的,雖說有些麻煩,可是整體配合還是非常不錯的。 

 ·背景顏色 background-color
      我想這個我就不用多做介紹了,顏色代碼我想大家都知道的,不是用英文來代替就是用指定的代碼來表示的。這個的默認值是transparent(透明色)。
 例:

body{background-color:yellow}
 H1{background-color:#000000}

 

 ·背景圖片 background-image
      背景圖片和背景顏色在HTML里面的設置也是基本相同的,都可以在里加入相關的語句來完成。但是在這里,我所指的并非是用這種方法,我用的方法還是CSS。background-image這個的主要功能也就是用來顯示圖片,如果需要顯示圖片的話,那么只要在后面加上url(圖片的地址)就可以了,不顯示嘛,那是最簡單不過的了,什么也不要就行了,因為這個默認的就是none,而要加的話,就是在后面加上這個none就可以了。
 例:

body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF)}
 h1{background-image:url(none)}

 

      大家在使用里的背景圖片時,一定常常遇到一些圖片因為太小,而產生種種如圖片的重復出現而破壞了整個頁面的美感,想換成其它圖片又不合適之類的麻煩情況吧。不過現在好了,大家只要用了以下的幾個CSS里控制圖片方法,那么你以后就不會再有此類的麻煩事發生了。

 ·圖片是否重復顯示 background-repeat
      有時候重復顯示是需要的,可是有時候重復顯示則是讓人頭痛的,現在這個可以很好的幫助你了,而且它還可以幫你控制圖片重復的方式(水平方向重復、垂直方向重復以及兩個方向都有重復),而要實現這三個方向的重復也就只要在bcackground-repeat后面加上repeat-x(水平方向鋪開)、repeat-y(垂直方向鋪開)、repeat(兩個方向鋪開)。當然,它可以控制圖片的重復,也可以控制圖片不重復的。no-repeat這個就是用來表示只顯示一幅背景圖片,而不是重復出現的,這個可不是默認的喲,默認的是重復顯示背景圖片(repeat)。
 例:

body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat}

 ·定位圖片顯示位置 background-position
       一張背景圖片經過上面的設置后往往還不夠的,因為當你使用上面的不重復顯示設置后,圖片只顯示在頁面的左上角,而不會在其它地方,可是如果要在中間或者其它地方出現這張背景圖片的話,那么background-position這個就可以幫你了,因為它就是用來顯示圖片相對于左上角的一個位置的(就是默認的值0% 0%),由兩個值來設定,中間用空格來隔開。它的主要的幾個值有left|center|right和top|center|bottom,也可以用百分數值指定相對位置或用一個值來指定絕對位置,如50%表示的位置是在中心,而50px的水平值則表示圖片距左上角區域水平移動50px單位;這里要特別指出的是,1當你設置值的時候只提供一個值,則相當于只指定水平位置,垂直自動設置為50%;2當你設置的值是負數的時候,則表示背景圖片超出邊界。
 例:

body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}

·控制圖片是否滾動 background-attachment
       上面的兩步可以幫你完成圖像的定位,可是這樣做好以后還不是完美的,因為如果你的頁面有滾動條的時候,那么你這張背景圖片就不會永遠定位在那個位置了,如果想要圖片永遠定位在那個位置,就只有讓這張圖片隨著頁面的內容的滾動而滾動,這時background-attachment就可以幫你了你只要加入scroll(靜止)和fixed(滾動)中的其中一個就可以了。當然不是讓你亂加的,畢竟scroll是默認的,也就是不讓圖片隨頁面的內容而滾動的。
 例:

body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}

       好了,經過以上這番設置后,我相信你的背景一定會更美的,但是過多的代碼往往可讀性很差,容易讓人產生錯誤,所以在這里我要告訴大家的就是可以把以上的代碼全部加在一起使用,也就是說把以上相關的代碼加到background中。在把代碼加到background中的時候要在每個值中間加上空格來隔開,而且不要把背景顏色的代碼放在背景圖片的URL后面,以免圖片顯示不出來。
 例:

body{background:green url(file&:///C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat}

      最后提醒一下大家,如果用代碼直接插入的話,那么一定要放下面這個代碼的里后再放在之間才能正常顯示出來!

      接下來我再介紹一下用DW4制作以上樣式的方法,因為在DW中已經很詳細的列出各項來了,具體的作用我也說明過了,所以就簡要的介紹一下吧,只要大家能夠明白就行了。 

 1.在此之前大家應該把CSS Styles這個窗口打開,如未打開的話,那么就按Shift+F11或者從Window下拉菜單中選擇此項就可以了。

 2.點擊右鍵選擇new style...這個選項或者點擊下面的帶有+號的圖標。

 3.在彈出的窗口中的選擇如下,tag選擇body因為我們上面介紹的CSS樣式都是關于body的,而在這里我也只是介紹這個里面的background,其它的不要介紹內容之內;下面的type選擇第二個;define也選擇第二個,這樣你呆會就可以在該文件中的之間找到一個了,而這里面的內容其實就是我上面介紹的。呵~_^

 4.點擊OK后彈出的窗口才是最重要的。我之前已說過,我們這次主要介紹的是background這個選項,所以在旁邊的窗口中選中它吧。選中以后右邊的窗口將會變成與它相關的設置項,具體的我在上面介紹過了,大家只要參照上面的介紹就可以完成了。不過需要說明一下的是在這個窗口中的最下面兩項其實就是background-position中的水平方向垂直方向。

 5.最后再點擊OK就可以完成了。完成后你就可以在該頁的代碼(View下的Code選項)中找到它們了。

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (173人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 日本免费一区二区| 亚洲精品无码久久| japanese55日本熟妇| 人妻丰满熟妇av无码区| 欧美video巨大粗暴| freesex高清日本vide| 福利短视频短视频集合| 日本高清乱理伦片中文字幕| 再深点灬舒服灬太大了| wwxxxxx日本高潮| 美女裸体无遮挡奶头免费视频害羞| foxybrown| 小黄文超级污的那种| google永久免费的服务器| 真实女人偷人偷拍视频| 杨程周慕雪全文免费| 一本大道中文日本香蕉| 腰冲刺花心哭忍撞| 好疼好胀快点拨出来| 97资源共享在线视频| 手机看片国产超清无码| 日本高清视频www色| 另类亚洲小说图片综合区| 日本在线一区二区三区欧美| 强行扒开双腿猛烈进入| 欧美大胆a级视频| 精品人妻少妇一区二区| 免费韩漫破解网址| 国产成人精品一、二区| 9|热爆私密按摩偷拍| 全部免费特黄特色大片| http://www.js-creat.com