2012/02/15

CSS3 Background Future

JaceJu 的噗浪上看到 CSS3 background 新的特性,可以讓瀏覽器控制背景圖片的一些屬性,頗好用的。


CSS3 Backgrounds of the Future
http://www.andismith.com/blog/2012/02/css-backgrounds-of-the-future/


設定背景圖片:
body {
   backgroud: bg.jpg;  /* 1024x768 */
}

以上的設定,當視窗大小如你預期相同時,畫面便會與最初的設計相同,但若視窗較大或較小,都可能會讓畫面走樣。


加上 background-size 屬性,讓瀏覽器決定圖片的大小:
body {
   backgroud: bg.jpg;
   background-size: contain; 
}

修改之後,背景圖片便會依照視窗大小做調整。

沒有留言:

張貼留言