background-size的取值有哪些？cover与contain有什么区别？

最新推荐文章于 2024-09-23 11:30:52 发布
最新推荐文章于 2024-09-23 11:30:52 发布
阅读量3k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hu_lanlan/article/details/78455995
本文介绍了CSS中背景图像尺寸设置的几种方式：contain使图像扩展至最大尺寸以适应内容区域；cover让背景图像完全覆盖背景区域，可能部分不显示；length直接设置背景图像宽高；percentage则以父元素的百分比来设定。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位中。(背景的宽度撑满整个屏幕)

length：设置背景图像的高度和宽度。如果只设置一个值，则第二个值会被设置为“auto”。

percentage：以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为“auto”。

background-size使用详解
09-25
background-size属性提供了多种设置方式，包括具体的长度值、百分比、以及两个特定的关键字：cover和contain。下面，我们将详细介绍background-size属性的各种用法。 首先，我们需要了解background-size属性的基本...
关于background-size的cover和contain
ttl1076005106的博客
12-30 586
1.cover:把背景图像扩展至足够大（非等比例的扩大），以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
background-size cover和contain的区别
热门推荐
湛庐无方
01-16 5万+
相同点：图片都是等比例缩放 不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示 比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示 background:#ccc url(111.jpg) no-repeat center top; background-size: cover; 显示结果： 两边的去掉很多，如果图片很小
CSS background-size ：contain与cover区别
ee22ee的博客
01-30 1841
css background-size设置contain与cover区别
background-size的几种取值
gcyaozuodashen的博客
12-04 2875
3、background-size:cover: 图片保持比例放大或缩小使X轴Y轴都铺满整个容器，但图片超出容器部分会被剪裁掉，图片不变形。4、background-size:contain: 图片保持比例放大或缩小，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。2、background-size:100% 100%: 图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器，图片可能会变形。
background-size:cover | contain；
04-12 1526
background-size:cover | contain; 原图 不使用background-size 第一张背景图片：600 × 431第二张背景图片：426 × 600每个元素的大小：350 × 350 background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素保持背景图片的宽高比
说说background-size:cover;与background-size:contain的区别
Allenyhy的博客
09-04 3万+
1.background-size:cover 官方background-size:cover;的解释是这个样子的，截图如下所示： 解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。             2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。 下面举一个栗子来说明这种情况： 首先原始的背景图片是这样的。 而设置b...
background-size的取值
06-18
`background-size` 是 CSS 中的一个属性，用于设置背景图像的尺寸，可以控制背景图片的显示方式。它的取值主要有以下几种： 1. **长度值**：如 `100px` 或 `cover`，指定背景图像的宽度和高度（对于正方形图像）或...
background-image、background-position、background-position、background-size
12-29
常用的取值有repeat（默认值，图像在水平和垂直方向上平铺）、repeat-x（图像在水平方向上平铺）、repeat-y（图像在垂直方向上平铺）和no-repeat（图像不平铺）。 background-size是CSS属性，用于设置背景图像的...
background-size属性
最新发布
03-21
用户可能需要了解如何将background-size与其他属性结合使用，比如background-position和background-repeat，如引用[2]和[3]提到的。这时候需要强调斜线在简写属性中的使用，确保语法正确。 此外，需要注意不同...
background-size:cover;与background-size:contain;的区别
weixin_39413579的博客
04-01 722
作用：将图片以相同宽高比缩放以适应整个容器的宽高。 cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉（以铺满整个容器为主） contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域（以显示完整背景图为主） ...
background-size：contain 与cover的区别（转载）
友人C君的博客
03-25 1042
作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover（遮盖）：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain（包含）:图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域； 2.在repeat情况下： ...
英文写作中“包含”include、contain、involve、cover的用法
michel_2010的博客
06-02 1万+
注意，如果把不同类元素抽象成一类元素，就可以用include，例如：A table tennis match includes various entities like two players, a playground and a judge.（一场乒乓球赛包含各种实体……）“用户”只包含人这一类元素。三、contain的基本意思是在一个“容器”内“包含”，例如：A box contains books. A byte contains a character.（一个字节包含一个字符。
background-size： contain 与cover
hehexu_的博客
11-18 4743
一：background-size： contain 与cover的区别： 作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域 ...
CSS3:background-size属性
独茧
02-11 1391
语法：background-size:[<length>|<percentage>|auto]{1,2}|cover|contain
background-size值：cover、100%和contain的区别
菜菜的博客
04-30 3万+
background-size 属性规定背景图像的尺寸。 先看看W3C的解释： background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 图片右边有空白区域 background-size：100% 100%;---按容器比例撑满，图片变形； 图片被横向拉伸 background-s...
背景图片设置
djp0910的博客
04-21 299
1.背景图片宽度问题 设置为背景图片的图片不够宽，采用的又是不重复的方式，以至于不能完全覆盖body或者父元素，这种情况下可以设置background-size; background-size:length|percentage|cover|contain; length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "au...
【CSS】background-size 属性详解
lph159的博客
09-23 1万+
属性允许你定义背景图片的大小，以适应元素的尺寸和页面布局。该属性能够通过多种方式设定背景图像的缩放比例，提供了从完全覆盖到按比例缩放的多种方案。auto：默认值，保持背景图片的原始大小。cover：背景图片将被缩放到足够大，以完全覆盖元素的背景区域，即使图片会被裁剪。contain：背景图片将被缩放到足够小，以完整显示在元素背景中，且不会被裁剪。指定尺寸：你可以直接设定背景图片的宽度和高度，如或50% 50%，甚至还支持calc()函数进行动态计算。属性为开发者提供了强大的背景图像控制能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值