background-size （設置背景圖片的大小）

時間 2019-11-18

標籤 background size 設置背景圖片大小简体版

原文原文鏈接

設置背景圖片的大小，以長度值或百分比顯示（數值包括長度length和百分比percentage），還能夠經過cover和contain來對圖片進行伸縮。javascript

語法：background-size: auto | <長度值> | <百分比> | cover | containcss

bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | containhtml

而且會根據背景原點位置 background-origin 設置其圖片覆蓋的範圍。java

取值說明：web

一、auto：默認值，不改變背景圖片的原始高度和寬度；瀏覽器

length，percentage，根據給定長度值或者百分比來調整背景圖片大小，第一個值爲設置圖片寬度，第二個值爲圖片的高度，可是無論是用什麼值，都不能爲負值；app

這三個值最小可重複一次，最大重複兩次。webapp

假如只給定一個值，那麼第二個自動的爲 'auto'；
假如指定爲 percentage百分比值，那麼背景圖大小是根據相對的背景區域來作調整，這個背景區域是由background-origin來來決定的。這裏有必要提到假如background-attachment:fixed，那麼其背景相對區域就是初始包含塊也就是視窗。url

/* 一個值: 這個值指定圖片的寬度，那麼第二個值爲auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px

/* 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，請用逗號隔開，在CSS語法中凡語法後跟*或者#，都是能夠無限重複的，可是必須用逗號隔開。 */
background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

background-size: inherit

二、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置爲前面兩個值，當設置一個值時，將其做爲圖片寬度值來等比縮放；spa

三、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置爲所在元素寬高乘之前面百分比得出的數值，當設置一個值時同上；

四、cover：顧名思義爲覆蓋，即將背景圖片等比縮放以填滿整個容器；

按比例調整背景圖片，這個屬性值跟contain正好相反，背景圖片會按照好比自適應鋪滿整個背景區域。假如背景區域不足以包含背景圖片的話，那麼背景圖片就會被咔嚓。

例如1
.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*圖片的寬高爲440*440，而元素相對區域高度爲50*/ 
    background-size:cover;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相對區域寬度爲50*/ 
    background-size:cover;
}

 當使用了  這個值的時候，那麼正好就跟contain相反，其會正好覆蓋整個背景相對區域，可是背景圖片的某些部分就看不見，以下圖的狗的下半身和右側身體顯示不全。cover

例如2：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="utf-8">
　　<title>背景圖片大小</title>
　　<style type="text/css">
　　　　.demo {

　　　　　　background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
　　　　　　width: 300px;
　　　　　　height: 140px;
　　　　　　border: 1px solid #999;
　　　　　　background-size:cover;
　　　　}
　　</style>
</head>
<body>
　　<div class="demo">
　　</div>
</body>
</html>

五、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣爲止。

contain，按比例調整背景圖片，使得其圖片寬高比自適應整個元素的背景區域的寬高比，所以假如指定的圖片尺寸過大，而背景區域的總體寬高不能剛好包含背景圖片的話，那麼其背景某些區域可能會有空白。看如下代碼

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;  
 /*圖片的寬高爲440*440，而元素相對區域高度爲50*/ 
    background-size:contain;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;  
 /*元素相對區域寬度爲50*/ 
    background-size:contain;
}
當圖片剛好自適應鋪滿元素的寬度或者高度，那麼元素的會有空白處存在，也就是圖中紅色框框都顯示了空白。

說說背景圖片計算值

假如說只是拿單一的數值或者具體數值來解釋那理解起來應該不難，但假如用混合長度來講，可能會有點一會兒明白不上來。

規範給了幾個例子，不妨拿出來一下：先聲明，因此的元素尺寸爲 100*100

100% 100%背景圖片將鋪滿整個內容區，假如說元素有固有寬高，那麼背景圖片鋪滿整個100*100背景區域

div {
    background-image: url(plasma.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box }
背景圖片調整爲寬度爲50*50，可是背景圖片的原點位置爲邊框box而不是padding-box
p {
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border-box }
背景圖片尺寸調整爲15*15
para {
    background-size: 15px 15px;
    background-image: url(tile.png)}
這是默認值，也就是auto auto，此時背景圖片的尺寸將會是跟圖片的固有尺寸同樣.

body {
    background-size: auto;            /* 默認值 */
    background-image: url(flower.png) }
假如兩個都是百分比，此時圖片就會根據背景區域來按照寬高比自適應，此處背景圖片爲20*30，可是由於背景重複用了 'round'循環，所以背景區域高度劃分了3個33.3等高區域，因此背景圖片會自適應調整爲20*33.3
p {
    background-image: url(chain.png);
    background-repeat: no-repeat round;
    background-size: 20% 30% }

在MND幫助文檔中還提到了關於火狐的漸變圖片背景問題，不過那是涉及到Firefox8，規範中不推薦同時使用px和auto，由於在8之前的火狐瀏覽器不支持重複渲染，可是我在caniuse上看見的版本是31+，so，你就盡情的用吧。而且對於移動瀏覽器的支持仍是很是的好的，請看下圖可知，除了opera8部分不支持之外：

應用場景

目前用到 background-size的場景都是基於webapp的背景圖上，大體的狀況是，好比說最多見的logo做爲某個元素的背景，但logo很複雜，假如說咱們按照設計圖上的去切片的話，那會有兩種可能：
一、按照csser的分辨率去切片，好比高度爲50px，logo被直接縮放到50px那就會很彆扭，並且估計那那畫面太美，你都不敢看；
二、按照射擊溼設計的分辨率去切的話，有可能設計圖的logo尺寸會很大，可是咱們csser寫的時候高度只有50px，那logo就會顯示不全；

這時候background-size就發揮其重要的做用了，咱們能夠經過對背景圖片大小的自適應縮放，而不會影響到起美觀性又能所有顯示咱們所須要的效果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。