CSS background-size ：contain与cover区别

cover和contain都是用图片覆盖背景区域

background-size: contain

background-size: cover

在no-repeat的情况下：

cover不会留白，如果容器宽高小于图片的宽高，会把多余的部分截掉。

也就是容器高度超过图片原有比例，图片的宽会缺失，通俗点讲，就是图片右边会少一部分；反之，容器高度小于图片原有比例，图片下面会有一部分看不见；容器宽度超过图片原有比例，图片下面会有一部分看不见；反之，容器宽度小于图片原有比例，图片右边会少一部分。

contain属性,容器宽大于图片宽，那么图片的右边会留白；如果容器高大于图片高，那么图片下面会留白。

参考文章：https://blog.csdn.net/qq_59281339/article/details/126548608

CSS background-size ：contain与cover区别相关推荐

css background size
background-position:100% 100%; 转载于:https://www.cnblogs.com/rayrayray/archive/2012/03/28/2420872.html
CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
.scss和.css的区别,css - SCSS和Sass有什么区别？
css - SCSS和Sass有什么区别? 从我一直在阅读的内容来看,Sass是一种通过变量和数学支持使CSS更强大的语言. 与SCSS有什么区别? 它应该是同一种语言吗? 类似? 不同? bruno ...
html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
html坐标轴背景色,CSS 背景(css background)
CSS 背景-CSS background 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式 ...
[css] pseudo-class与pseudo-element有什么区别？
[css] pseudo-class与pseudo-element有什么区别? 伪类表示已存在的某个元素处于某种状态,但是通过dom树又无法表示这种状态,就可以通过伪类来为其添加样式.例如a元素的:h ...
css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别
Css隐藏元素(display,visibility)的区别 display display属性值 display 属性规定元素应该生成的框的类型. 属性值: block: /表现为一个块级元素(一般 ...
css里dotted,CSS中dashed和dotted的区别有哪些
对于刚刚接触css的朋友们来说都会分不清dashed和dotted,那么你知道CSS中dashed和dotted的区别有哪些吗?那么针对这个问题爱站小编就为大家接受CSS中dashed和dotted的 ...

CSS background-size ：contain与cover区别

CSS background-size ：contain与cover区别相关推荐

最新文章

热门文章