原文:background-size:100% 100% 和 background-size:cover的區別簡述

下面我通過給下圖背景圖添加background size屬性的不同屬性值,更直觀的顯示出 和cover的區別 下圖是添加background size: 后的背景圖效果,背景圖被拉伸后有點失真 下圖是添加background size: cover后的背景圖效果,背景圖被拉伸后背景圖不能全部顯示 它們的區別: background size: 把背景圖進行橫向和縱向的拉伸,圖片比例隨之改變, 可 ...

2019-08-20 11:05 0 1926 推薦指數:

查看詳情

background-size值為cover和值為100%的區別

background-size100%和background-sizecover區別background-size100%---按容器比例撐滿,圖片變形;background-sizecover---把背景圖片放大到適合元素容器的尺寸,圖片比例不變。IE8及以下版本用濾鏡來兼容 ...

Mon Jul 20 19:00:00 CST 2015 0 3483
background-size值為cover和值為100%的區別

background-size100% 100%;---按容器比例撐滿,圖片變形; background-sizecover;---把背景圖片放大到適合元素容器的尺寸,圖片比例不變。  IE8及以下版本用濾鏡來兼容background-size如下: filter:progid ...

Thu Sep 05 19:33:00 CST 2019 0 838
Background-Size

Background-Size:[ <length> | <percentage> | auto ]{1,2} | cover | contain background-size指定背景大小,以象素或百分比顯示。當指定為百分比時,大小會由所在區域的寬度、高度 ...

Tue Aug 28 18:48:00 CST 2012 0 9916
background-size 詳解

backgroun-size:cover; .是按照等比縮放鋪滿整個區域。主要用於圖片比div小的時候,將圖片按照某一邊的比例擴大以填充整個div背景。 .優點:圖片不會被拉升,且實用於div長度和寬度的比例合適時候 .缺點:圖片會失真,且當寬度和高度比例過大時候,會出現圖片顯示不全 ...

Tue Jun 18 19:59:00 CST 2019 0 570
background-size屬性詳解

css background-size 屬性詳解,background-size 指定背景圖像大小,以象素或百分比顯示,當指定為百分比時,大小會由所在區域的寬度、高度以及 background-origin(圖片的起始位置) 的位置決定,還可以通過 cover 和 contain 來對圖片進行伸縮 ...

Wed Dec 09 23:52:00 CST 2020 0 341
background-size: contain 與cover區別,以及ie78的兼容寫法

一:background-size: contain 與cover區別: 作用: 都是將圖片以**相同寬高比**縮放以適應整個容器的寬高。 不同之處在於: 1. 在no-repeat情況下,如果容器寬高比與圖片寬高比不同,   cover:圖片寬高比不變、鋪滿整個容器的寬高,而圖片多出 ...

Mon Feb 22 08:49:00 CST 2016 0 29858
background屬性簡寫background-size屬性

前言: CSS3提供了很多豐富且實用的規范,得以讓網頁更加絢麗多彩。因為多了很多新的知識,我學得也沒那么全面,經常就多敲了很多多余得代碼。 比如CSS3提供了background-size屬性,可以設置背景圖片的尺寸。因為是新屬性,也不知道能不能用background簡寫,每次我都分開 ...

Tue Dec 29 20:50:00 CST 2020 0 886
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM