![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](https://pic.pimg.tw/netyea/1675482199-480240782-g.jpg) |
配景圖可依內容元素的寬高,作百分比的縮放,同樣要注意數值的設定,避免配景圖片變形失真,猶如範例。 |
指定背景圖片寬度200px高度auto
- -moz-background-size:200px 150px;
- -webkit-background-size:200px 150px;
- -o-background-size:200px 150px;
- background-size:200px 150px;
複製代碼
background-size:cover
- Firefox(3.63+較好支援)
- Google Chrome(5+較好支援)(P.S:Google瀏覽器自動更新,不需擔憂利用到舊版)
- Internet Explorer(IE6、IE7 不支援、IE8 很少支援)
- Opera(10+部份支援)
- Safari(4+較好支援)
指定靠山圖片寬度50%高度auto
background-size:auto;
- -moz-background-size:contain;
- -webkit-background-size:contain;
- -o-background-size:contain;
- background-size:contain;
複製代碼
![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](https://pic.pimg.tw/netyea/1675482201-2623845361-g.jpg)
網頁設計
- -moz-background-size:cover;
- -webkit-background-size:cover;
- -o-background-size:cover;
- background-size:cover;
複製代碼
- -moz-background-size:50% 100%;
- -webkit-background-size:50% 100%;
- -o-background-size:50% 100%;
- background-size:50% 100%;
複製代碼
結果顯現為了讓呈現結果有明顯的區別,類型中的屬性預設為:
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;
- -moz-background-size:200px;
- -webkit-background-size:200px;
- -o-background-size:200px;
- background-size:200px;
複製代碼
網頁設計CSS 3 瀏覽器支援狀態
![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](http://www.tshopping.com.tw/data/attachment/forum/201606/12/053131y55xy41ukc5iuw1t.jpg) |
auto取自原背景圖片的尺寸不作任何的修改,所以呈現結果和沒加background-size結果是一樣的。 |
![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](https://pic.pimg.tw/netyea/1675482199-2650796424-g.jpg) |
雖可肆意指定圖片大小,但若是數值沒取好,輕易使配景圖變形失真,猶如此類型。 |
- -moz-background-size:auto; /*for Firefox*/
- -webkit-background-size:auto; /*for Google Chrome、Safari*/
- -o-background-size:auto; /*for Opera*/
- background-size:auto; /*for IE*/
複製代碼
background-size:contain
contain首要用於背景圖大於地點內容,由於佈景圖尺寸(100px*122px),所以將此範例內容元素屬性設為width:50px;height:61px;
![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](https://pic.pimg.tw/netyea/1675482201-611640609-g.jpg) |
cover使背景圖不靠repeat,占滿整個內容版面。 |
contain使配景圖在尺寸大於內容元素的情況下,得以完整顯現。 |
background-size:percentage
指定背景圖片寬度50%高度100%
指定配景圖片巨細
background-size:bg-size , bg-size
bg-size = auto | length | percentage | cover | contain
- 預設值為auto,即背景圖片原始長寬。
- length指定圖片具體大小的數值,不允許負值。
- percentage以後臺圖所在元素的百分比指定配景圖巨細,不答應負值。
- length與percentage可設定2數值,也可只設定1個數值,當只設定一個數值,另一個數值(高)預設值為auto,此時高度以配景圖原始寬高比例,主動縮放。
- cover首要用於靠山圖小於地點的內容,而佈景圖又不適合利用repeat,此時就能夠採用cover的體例,使後臺圖放大至內容的巨細,但此方法輕易使佈景圖因放大而失真。
- contain與cover正好相反,首要用於佈景圖大於地點內容,但卻需要將靠山圖完整呈現,此時便可採用contain的體式格局,使背景圖縮小至內容的大小。
![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](https://pic.pimg.tw/netyea/1675482199-1468202380-g.jpg) |
規範中所利用的靠山圖(100px*122px) |
![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](https://pic.pimg.tw/netyea/1675482198-4238613416-g.jpg) |
此類型和上個類型,都是設定背景圖片寬為200px,但不同點在於此典範榜樣的高度為auto,高度是合營寬度作比例的縮放,此為它的長處。 |
![CSS 3佈景新屬性:background-size 網頁設 CSS 3佈景新屬性:background-size 網頁設](https://pic.pimg.tw/netyea/1675482198-1062331242-g.jpg) |
此範例和上個典範榜樣,都是設定背景圖片寬為50%,但分歧點在於此類型的高度為auto,高度是合營寬度作比例的縮放,此為它的長處。 |
濫觞:http://www.kip.com.tw/modules/news/article.php?storyid=35
- -moz-background-size:50%;
- -webkit-background-size:50%;
- -o-background-size:50%;
- background-size:50%;
複製代碼
background-size:length
指定背景圖片寬度200px高度150px
zosimogx30t4 發表在 痞客邦 留言(0) 人氣()
|