資訊專欄INFORMATION COLUMN
摘要：支持情況以及在移動開發(fā)的時(shí)候，需要尺寸減半的需要。實(shí)際看效果的時(shí)候，出現(xiàn)了問題，原來不能這么用。背景圖像縮放同時(shí)保留圖像原有的比例長寬比無論是圖像的寬度或高度超過背景區(qū)域以盡可能大的覆蓋背景區(qū)域。
background-size
支持情況：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+
在移動開發(fā)的時(shí)候，需要尺寸減半的需要。
特別是在引入雪碧圖的時(shí)候，以前的寫法總是直接寬，高直接減半，沒有出過問題
.BZ{
background:url() no-repeated;
background-size: width/2, height/2;
}
今天有人問我，background-size直接設(shè)為50%不就行了，沒有細(xì)想，直接說行。
實(shí)際看效果的時(shí)候，出現(xiàn)了問題，原來不能這么用。
自己慢慢研究，先總結(jié)下：
先對照自己的例子說明下，增強(qiáng)自己的記憶：
background-size via @CodePen
background-size: 參考是元素本身的寬高，并不是參考引入圖片的寬高,也就是說它參考的是section的大小，不是圖片自身直接縮減圖片的寬高
.bz{
background-image: url();
background-repeat: no-repeat;
background-size: 320px,200px;
}
設(shè)置寬高一個(gè)屬性的時(shí)候，另一個(gè)將會按照原來的比例進(jìn)行變化(即設(shè)置一個(gè)屬性，另一個(gè)等比例變化)
.bz{
background-size: 320px,auto; // 高也會變半
background-size: auto, 200px; // 寬也會變半
}
設(shè)置多個(gè)背景圖片
.secmul{
width: 480px;
height: 300px;
// set imgs urls
background-image: url(../../static/imgs/m1.jpg), url(../../static/imgs/m2.jpg), url(10.large.jpg);
// set repeat pros
background-repeat: no-repeat,no-repeat,no-repeat;
// 設(shè)置不同的位置，相對與最外層的畫布大小
background-position: 0px 0px, right bottom, right top;
background-color: #EEE;
// 分別設(shè)置 不同背景圖片的大小
background-size: 200px 225px, 100px 100px, cover;
}
cover與contain 屬性詳解
background-size-prototype @CodePen
cover:背景圖像縮放,保留圖像原有的比例/長寬比,不管背景圖像大于還是小于背景區(qū)域，都會覆蓋背景區(qū)域,圖像的寬度或高度等于或超過背景區(qū)域,再次,根據(jù)背景圖像的比例是否匹配的背景區(qū)域,背景圖像的某些部分可能不在背景區(qū)域內(nèi)。
contain:背景圖像縮放,同時(shí)保留圖像原有的比例/長寬比,無論是圖像的寬度或高度超過背景區(qū)域,以盡可能大的覆蓋背景區(qū)域。因此,根據(jù)背景圖像的比例是否匹配背景區(qū)域,可能會有一些背景圖像覆蓋不到背景地區(qū)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111251.html
摘要：這里的關(guān)鍵說明在于標(biāo)紅的兩個(gè)區(qū)域，分別是它會保持圖片的寬高比和當(dāng)圖像和容器具有不同的尺寸時(shí)，空區(qū)域左右上右填充背景色。原圖為，所以為了放入，寬，那么高就得寬高比，所以會有下面的空白。 background-size與背景圖片填滿div 在開發(fā)中，常有需要將一張圖片作為一個(gè)div的背景圖片充滿div的需求 background-size的取值及解釋 background-size共有三種...
摘要：，，下對并不支持，那么如何在下兼容呢在下把圖片完整的居中顯示在一定范圍內(nèi)在中添加如下代碼圖片地址下面給出完整的實(shí)例代碼讓兼容的方法圖片地址圖片地址原文地址 ie6，ie7，ie8下對css background-size并不支持，那么如何在ie下兼容background-size呢？在ie下把圖片完整的居中顯示在一定范圍內(nèi)在css中添加如下代碼： filter: progid:DXIm...
摘要：，，下對并不支持，那么如何在下兼容呢在下把圖片完整的居中顯示在一定范圍內(nèi)在中添加如下代碼圖片地址下面給出完整的實(shí)例代碼讓兼容的方法圖片地址圖片地址原文地址 ie6，ie7，ie8下對css background-size并不支持，那么如何在ie下兼容background-size呢？在ie下把圖片完整的居中顯示在一定范圍內(nèi)在css中添加如下代碼： filter: progid:DXIm...
摘要：，，下對并不支持，那么如何在下兼容呢在下把圖片完整的居中顯示在一定范圍內(nèi)在中添加如下代碼圖片地址下面給出完整的實(shí)例代碼讓兼容的方法圖片地址圖片地址原文地址 ie6，ie7，ie8下對css background-size并不支持，那么如何在ie下兼容background-size呢？在ie下把圖片完整的居中顯示在一定范圍內(nèi)在css中添加如下代碼： filter: progid:DXIm...
閱讀 1052·2021-11-18 13:23
閱讀 760·2021-11-08 13:16
閱讀 872·2021-10-11 10:58
閱讀 3522·2021-09-22 15:26
閱讀 1750·2021-09-08 10:42
閱讀 1828·2021-09-04 16:45
閱讀 1745·2019-08-30 15:54
閱讀 2577·2019-08-30 13:45
