新聞| | PChome| 登入
2023-06-06 01:45:02| 人氣63| 回應0 | 上一篇 | 下一篇
推薦 0 收藏 0 轉貼0 訂閱站台

網頁設計 CSS 3背景新屬性：background-siz



 

 

7.jpg cover使佈景圖不靠repeat，占滿整個內容版面。


指定背景圖片寬度50%高度auto
 


指定背景圖片寬度200px高度auto
 

2.jpgauto取自原後臺圖片的尺寸不作任何的點竄，所以出現效果和沒加background-size結果是一樣的。
  1. -moz-background-size:50%;
  2. -webkit-background-size:50%;
  3. -o-background-size:50%;
  4. background-size:50%;
複製代碼
5.jpg 後臺圖可依內容元素的寬高，作百分比的縮放，一樣要注意數值的設定，避免靠山圖片變形失真，如同典範榜樣。
  1. -moz-background-size:200px 150px;
  2. -webkit-background-size:200px 150px;
  3. -o-background-size:200px 150px;
  4. background-size:200px 150px;
複製代碼

網頁設計background-size：percentage

指定佈景圖片寬度50%高度100%
 

網頁設計

 

6.jpg 此範例和上個範例，都是設定配景圖片寬為50%，但分歧點在於此範例的高度為auto，高度是配合寬度作比例的縮放，此為它的長處。

 

  1. -moz-background-size:cover;
  2. -webkit-background-size:cover;
  3. -o-background-size:cover;
  4. background-size:cover;
複製代碼

指定後臺圖片大小
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的體式格局，使配景圖縮小至內容的大小。



 

1.jpg 類型中所利用的佈景圖(100px*122px)


 

background-size：auto;

效果呈現為了讓出現效果有明顯的區分，典範中的屬性預設為：
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;
 



來源：http://www.kip.com.tw/modules/news/article.php?storyid=35

4.jpg 此範例和上個範例，都是設定佈景圖片寬為200px，但分歧點在於此典範的高度為auto，高度是合營寬度作比例的縮放，此為它的長處。

background-size：contain

contain首要用於背景圖大於地點內容，由於靠山圖尺寸(100px*122px)，所以將此典範內容元素屬性設為width:50px;height:61px;
 

background-size：cover
 

background-size：length

指定背景圖片寬度200px高度150px

 


 


 

8.jpg

  1. -moz-background-size:auto;        /*for Firefox*/
  2. -webkit-background-size:auto;        /*for Google Chrome、Safari*/
  3. -o-background-size:auto;        /*for Opera*/
  4. background-size:auto;        /*for IE*/
複製代碼
  1. -moz-background-size:contain;
  2. -webkit-background-size:contain;
  3. -o-background-size:contain;
  4. background-size:contain;
複製代碼
3.jpg 雖可隨便指定圖片巨細，但若是數值沒取好，輕易使佈景圖變形失真，猶如此範例。

CSS 3 瀏覽器支援狀態

網頁設計

 

  1. -moz-background-size:50% 100%;
  2. -webkit-background-size:50% 100%;
  3. -o-background-size:50% 100%;
  4. background-size:50% 100%;
複製代碼
  • Firefox(3.63+較好支援)
  • Google Chrome(5+較好支援)(P.S：Google瀏覽器主動更新，不需憂慮使用到舊版)
  • Internet Explorer(IE6、IE7 不支援、IE8 很少支援)
  • Opera(10+部分支援)
  • Safari(4+較好支援)


 

 

  1. -moz-background-size:200px;
  2. -webkit-background-size:200px;
  3. -o-background-size:200px;
  4. background-size:200px;
網頁設計 複製代碼

 

 

 contain使背景圖在尺寸大於內容元素的情形下，得以完全呈現。


本文來自:

我要檢舉
台長： andrewjqxt

您可能對以下文章有興趣

人氣(63) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 運動體育(各種運動、運動情報、球迷會) | 個人分類: NetYea |
此分類下一篇:網頁設計 ESP32 用Arduino程式上傳測試Hello
此分類上一篇:在 Arduino IDE 上面安裝 ESP32

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文