background-size:contain与cover的区别,以及ie78的兼容写法

更新时间:2023-05-13 18:47:48 阅读: 评论:0

background-size:contain与cover的区别,以及ie78的兼容写法⼀:background-size: contain 与cover的区别:
作⽤:都是将图⽚以**相同宽⾼⽐**缩放以适应整个容器的宽⾼。
不同之处在于:
1.  在no-repeat情况下,如果容器宽⾼⽐与图⽚宽⾼⽐不同,
  cover:图⽚宽⾼⽐不变、铺满整个容器的宽⾼,⽽图⽚多出的部分则会被截掉;
  contain:图⽚⾃⾝的宽⾼⽐不变,缩放⾄图⽚⾃⾝能完全显⽰出来,所以容器会有留⽩区域;lance
PS:其实,从英⽂的意思来说:cover意味着“遮罩、遮盖”---此处理解为“塞满”较恰当,contain意为“包含”--也就是:我图⽚虽然缩放了,但是整个图是被“包含”在你⾥⾯的,你必须把我显⽰完整、不能裁剪我⼀丝⼀毫~
2.  在repeat情况下:cover:与上述相同;contain:容器内⾄少有⼀张完整的图,容器留⽩区域则平铺背景图,铺不下的再裁掉。
-------------------
例⼦:
先上原图:宽⾼600*1069
代码:
<div class="img-block"></div>
css代码之no-repeat:cover版:
.img-block{
width: 200px;
height: 200px;
border:2px solid black;
韩语 你好background:url(../img/justice.jpg) no-repeat;expen
background-size:cover;
}
效果图:
infuture看的出来:cover的效果是:图⽚同⽐缩放、塞满整个容器,⽽图⽚多余的部分则被剪掉了;
css代码之no-repeat:contain版:
.img-block{
width: 200px;
height: 200px;
border:2px solid black;
background:url(../img/justice.jpg) no-repeat;
background-size:contain;
}
效果图:
看得出来:contain版:图⽚同⽐缩放⾄图⽚能完全显⽰在容器中,故容器有留⽩。so,这就涉及到俺最开始说的background-repeat了。
如果情况变成background-repeat:repeat,(其他代码不变)那么此处的留⽩区域会再平铺⼀张背景图,⽽且肯定是铺不满⼀张的,那么这第⼆张背景图才会被截断;效果⼊下:
we d然后我估计看⽂的某些懒⼈会懒得去翻上⾯的CSS代码,所以这⾥我就写⼀遍吧~
background-repeat:repeat情况之background-size:contain版
.img-block{
韩语转换器width: 200px;
height: 200px;
what是什么意思
border:2px solid black;
background:url(../img/justice.jpg);
background-size:contain;
}
⼆:background-size 在ie7\8的兼容写法:⽤filter滤镜
礼仪培训班⾄于ie6?我⾄今不知道ie6咋个整。如果你知道,请务必告诉我~
css中加⼊⼀句:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/justice.jpg',sizingMethod='scale');
参数解释:
src="图⽚路径",可以是相对,也可以是绝对;
sizingMethod:“scale|crop|image” 可选项。字符串(String)。设置或检索滤镜作⽤的对象的图⽚在对象容器边界内的显⽰⽅式。
  crop:剪切图⽚以适应对象尺⼨。
  image:默认值。增⼤或减⼩对象的尺⼨边界以适应图⽚的尺⼨。
除此之外英语
  scale:缩放图⽚以适应对象的尺⼨边界。
雅思口语练习网站PS:注意:如果设置了background-attachment:fixed;会是background-size属性失效

本文发布于:2023-05-13 18:47:48,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/617036.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:容器   背景图   适应   部分   意味着   平铺
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图