淺談background-size的幾個屬性值
阿新 • • 發佈：2018-11-02
前言：
css應用中，我們常會碰到background-size的用法，不妨下面總結一下，以便後續檢視。
一、先弄個簡單的box框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .box { width: 100%; height: 100%; background-image: url('images/page_bg_29078d1.jpg'); background-repeat: no-repeat; /* background-size: 100% 100%; */ /* background-size: auto 100%; */ /* background-size: 100% auto; */ /* background-size: contain; */ background-size: cover; } </style> </head> <body><div class="box"> </div> </body> </html>
二、看效果：
情況1：background-size: 100% 100%;
看的出來，圖片長寬都顯示出來了，但是圖片變形了。
情況2：background-size: auto 100%;
看到沒，縱向沒問題，橫向只能顯示一部分。
情況3：background-size: 100% auto;
看到沒，橫向能全部顯示出來，但是相對，整體縮小了很多。
情況4：background-size:contain；
;和上面效果一樣。
情況5：background-size: cover;
和情況2一樣。
小結：
平時根據需要以下三個就可以了。
background-size: 100% 100%; background-size: contain; background-size: cover;