background-size

SolomonXie 發布于2019-08-28 18:28 / 359人閱讀

摘要：支持情況以及在移動開發的時候，需要尺寸減半的需要。實際看效果的時候，出現了問題，原來不能這么用。背景圖像縮放同時保留圖像原有的比例長寬比無論是圖像的寬度或高度超過背景區域以盡可能大的覆蓋背景區域。

background-size

支持情況：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+

在移動開發的時候，需要尺寸減半的需要。

特別是在引入雪碧圖的時候，以前的寫法總是直接寬，高直接減半，沒有出過問題

 .BZ{
    background:url() no-repeated;
    background-size: width/2, height/2;
}

今天有人問我，background-size直接設為50%不就行了，沒有細想，直接說行。

實際看效果的時候，出現了問題，原來不能這么用。

自己慢慢研究，先總結下：

先對照自己的例子說明下，增強自己的記憶：

background-size via @CodePen

background-size: 參考是元素本身的寬高，并不是參考引入圖片的寬高,也就是說它參考的是section的大小，不是圖片自身

直接縮減圖片的寬高

.bz{
  background-image: url();
  background-repeat: no-repeat;
  background-size: 320px,200px;
}

設置寬高一個屬性的時候，另一個將會按照原來的比例進行變化(即設置一個屬性，另一個等比例變化)

.bz{
    background-size: 320px,auto; // 高也會變半
    background-size: auto, 200px; // 寬也會變半
}

設置多個背景圖片

.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;
// 設置不同的位置，相對與最外層的畫布大小
    background-position: 0px 0px, right bottom, right top;
    background-color: #EEE;
// 分別設置 不同背景圖片的大小
    background-size: 200px 225px, 100px 100px, cover;
}

cover與contain 屬性詳解

background-size-prototype @CodePen

cover:背景圖像縮放,保留圖像原有的比例/長寬比,不管背景圖像大于還是小于背景區域，都會覆蓋背景區域,圖像的寬度或高度等于或超過背景區域,再次,根據背景圖像的比例是否匹配的背景區域,背景圖像的某些部分可能不在背景區域內。

contain:背景圖像縮放,同時保留圖像原有的比例/長寬比,無論是圖像的寬度或高度超過背景區域,以盡可能大的覆蓋背景區域。因此,根據背景圖像的比例是否匹配背景區域,可能會有一些背景圖像覆蓋不到背景地區。

GPU云服務器云服務器 background-size

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111251.html

css background-size與背景圖片填滿div

摘要：這里的關鍵說明在于標紅的兩個區域，分別是它會保持圖片的寬高比和當圖像和容器具有不同的尺寸時，空區域左右上右填充背景色。原圖為，所以為了放入，寬，那么高就得寬高比，所以會有下面的空白。 background-size與背景圖片填滿div 在開發中，常有需要將一張圖片作為一個div的背景圖片充滿div的需求 background-size的取值及解釋 background-size共有三種...

ctriptech 2019-08-29 14:03 評論0 收藏0
讓IE兼容background-size的方法_background-size ie下使用

摘要：，，下對并不支持，那么如何在下兼容呢在下把圖片完整的居中顯示在一定范圍內在中添加如下代碼圖片地址下面給出完整的實例代碼讓兼容的方法圖片地址圖片地址原文地址 ie6，ie7，ie8下對css background-size并不支持，那么如何在ie下兼容background-size呢？在ie下把圖片完整的居中顯示在一定范圍內在css中添加如下代碼： filter: progid:DXIm...

fox_soyoung 2019-08-29 11:07 評論0 收藏0
讓IE兼容background-size的方法_background-size ie下使用

摘要：，，下對并不支持，那么如何在下兼容呢在下把圖片完整的居中顯示在一定范圍內在中添加如下代碼圖片地址下面給出完整的實例代碼讓兼容的方法圖片地址圖片地址原文地址 ie6，ie7，ie8下對css background-size并不支持，那么如何在ie下兼容background-size呢？在ie下把圖片完整的居中顯示在一定范圍內在css中添加如下代碼： filter: progid:DXIm...

Maxiye 2019-08-21 14:18 評論0 收藏0
讓IE兼容background-size的方法_background-size ie下使用

摘要：，，下對并不支持，那么如何在下兼容呢在下把圖片完整的居中顯示在一定范圍內在中添加如下代碼圖片地址下面給出完整的實例代碼讓兼容的方法圖片地址圖片地址原文地址 ie6，ie7，ie8下對css background-size并不支持，那么如何在ie下兼容background-size呢？在ie下把圖片完整的居中顯示在一定范圍內在css中添加如下代碼： filter: progid:DXIm...

sewerganger 2019-08-01 15:37 評論0 收藏0