電腦愛好者,提供IT資訊信息及各類編程知識文章介紹,歡迎大家來本站學習電腦知識。 最近更新 | 聯系我們 RSS訂閱本站最新文章
電腦愛好者
站內搜索: 
當前位置:首頁>> css>>css中關于background圖片背景cover和contain的對比和使用方法:

css中關于background圖片背景cover和contain的對比和使用方法

來源:網絡 | 2018-12-28 | (有189人讀過)

對于這兩個屬性,官網是這樣解釋的:

contain

此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。

等比例縮放圖象到垂直或者水平其中一項填滿區域。

cover

此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。

等比例縮放圖象到垂直和水平兩項均填滿區域。

 


讀了還是不懂,那么看下面的例子:

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;
}

當圖片恰好自適應鋪滿元素的寬度或者高度,那么元素的會有空白處存在,也就是圖中紅色框框都顯示了空白。


3 . cover,按比例調整背景圖片,這個屬性值跟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: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;
}

當使用了 cover 這個值的時候,那么正好就跟contain相反,其會正好覆蓋整個背景相對區域,但是背景圖片的某些部分就看不見。


css熱門文章排行
網站贊助商
購買此位置

 

關于我們 | 網站地圖 | 文檔一覽 | 友情鏈接| 聯系我們

Copyright © 2003-2019 電腦愛好者 版權所有 備案號:魯ICP備09059398號


内蒙古十一选五的走势图百度乐彩网