如何應用CSS控制網頁背景?

來源:互聯網
上載者:User

背景顏色 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當你設定的值是負數的時候,則表示背景圖片超出邊界。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.