CSS——background-size：100% 100%； 和 background-size：cover； 区别

于 2024-07-03 09:29:05 发布
阅读量155 收藏
点赞数 3
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43201350/article/details/140143104
版权

详见：background-size MDN：background-size MDN

background-size：100% 100%;—按容器比例撑满，图片变形；

background-size：cover;—把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。

dbt@L
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中background-size属性使用介绍
09-25
background-size可以设置2个值，第1个值用于指定背景图的width，第2个值用于指定背景图的height，不了解的朋友可以参考下
CSS之Background-size:cover
KK_2018的技术博客_程序员不止是程序员
12-04 2787
background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，可能导致图像失真 background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像 一般和如下语法连用 background-image: url(../images/1.png); background-...
关于background-size的cover和contain
ttl1076005106的博客
12-30 492
1.cover:把背景图像扩展至足够大（非等比例的扩大），以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
background-size中，100%和cover的区别
热门推荐
casanover
09-26 7万+
background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器 background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。 当为百分比的时候，100%和100%，100%也会显
background-size:cover;与background-size:contain;的区别
weixin_39413579的博客
04-01 648
作用：将图片以相同宽高比缩放以适应整个容器的宽高。 cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉（以铺满整个容器为主） contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域（以显示完整背景图为主） ...
background-size属性100%和cover的区别
yangyanqin2545的博客
11-10 1359
background-size属性100%和cover的区别 background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，可能导致图像失真（建UI给原始背景图，否则容易出现图片拉伸后失真） background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像 background-size: length | percentage | cover | contain (1)length
CSS-Background-Generator:https
04-07
- `background-size`: 控制背景图像的大小，可为百分比、像素值或`cover`、`contain`关键字。 - `background-attachment`: 决定背景图像是否随滚动而移动，`fixed`或`scroll`。 2. **JavaScript与CSS的交互**： ...
CSS3之背景尺寸Background-size使用介绍
09-25
- 当使用number或percentage时，可以为宽度和高度分别指定不同的值，如：background-size: 100px 50px; 或 background-size: 50% 30%。 - 也可以只指定一个值，另一个值将默认为auto，例如：background-size: 150...
CSS3属性background-size使用指南
09-25
CSS3属性`background-size`是CSS中的一个非常实用的属性，它主要用来设置背景图片的尺寸。在网页设计中，合理使用此属性能够使网页背景图片更具表现力和适应性。下面将详细介绍该属性的用法和特性。 首先，`...
css3 background-size属性--ie兼容
zerlinda_c的博客
11-24 5693
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :
background-size属性解释
2301_76665464的博客
10-02 769
然而，宽度因为父容器的高度等比放缩，从而适应屏幕，而此时高度损失有所变化。例：若父容器为1000px*500px，所引图片为1000px*1000px,则显示图片如下（虚线内不显示）将引入图片放缩，来适用父容器（取决于父容器的width与height哪个大)，铺满整个父容器，裁掉多余部分。若父容器·为2000px*500px，所引图片为1000px*1000px，则显示图片如下（虚线内不显示）该百分比是指的所引图片占父容器的百分比，所以第一个100%指的是所引图片宽度占屏幕100%
background-size 标签详解（举例说明）
weixin_41306215的博客
04-03 981
之前一直搞不懂background-size的几个属性的使用，今天终于有点小明白了，发几个例子出来 简单的来说 百分比%：相对于父元素的宽度和高度的百分比大小； auto:背景图片保持原来的大小； cover:按照原图片的比例，扩展至足够大，使图片完全覆盖整个背景区域（可能造成图片部分不可见，即被裁剪）； contain:把图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域（可能造...
CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；
kfepiza的博客
02-17 5002
background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);
background-size值为cover、100%和contain的区别
花落微凉梦清幽的博客
08-03 1万+
正如属性意义一样，三者都是来定义背景图显示尺寸大小的，但是三者还是有一点区别的： cover：是按照等比缩放铺满整个区域。如果显示如果显示比例和显示区域的比例相差很大某些部分会不显示，比如长度比宽度大很多，则宽度左侧会有一部分不显示。 100%：长宽100%显示，可能会拉升图片。 contain：也是等比缩放，按照某一边来覆盖显示区域的，会有白边...
常用的background背景属性详细~~干货
最新发布
weixin_74308843的博客
02-27 1760
background-image: url(./imags/搜索.png);我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片。与cover相反，会将图片等比例完全展示出来，因此可能会使。repeat-y同理。1 、百分比方式： 当。图片向两端对齐以填满容器，，默认平铺填满r容器。常配合使用在精灵图。
搞定HTML\CSS之background属性
王文松的博客
12-06 1万+
前言    我为什么写这个呢？因为我看别人的源码的时候，样式表里有比如下面这样的字眼：     background: url("../img/bg_idx_01.jpg") repeat-x scroll 50% 0 #FFFFFF;       而我吧，又是新手，只会background-color：、background-image：...这样的单独的用，肯定不如上面的方便，所以就学习
css 中 background-size 属性设置一个100%和两个100%的区别
tiezhongyu2010的博客
02-23 1956
                              background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)  
理解CSS3中的background－size(对响应性图片等比例缩放)
weixin_33725126的博客
03-10 2658
理解CSS3中的background－size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px－使用background－size:400px 200px缩放设置 固定宽度400px和高度200px－使用background-size:400px;的缩放设置，那么第二个参数会自...
background-size: 100% 100%;属性的作用是
05-27
background-size: 100% 100%;属性用于指定背景图片在元素中的大小。它可以应用于带有背景图片的元素。当应用于一个元素时，它会将背景图片的大小调整为与元素的大小相同，以确保图片完全覆盖元素的背景区域。 background-size属性可以接受两个值，第一个值用于指定背景图片在水平方向上的大小，第二个值用于指定背景图片在垂直方向上的大小。这些值可以使用像素、百分比或cover和contain等关键字来指定。当使用cover关键字时，背景图片会被放大或缩小，以尽可能填满整个元素的背景区域，可能会导致图片被裁剪；当使用contain关键字时，背景图片会被缩小或放大，以确保完全包含在元素的背景区域内，可能会导致元素的背景区域未被填满。 例如，可以使用如下的CSS代码将背景图片的大小调整为与元素大小相同： ```css background-size: 100% 100%; ``` 需要注意的是，使用background-size属性调整背景图片的大小时，可能会导致图片变形或失真，因此需要根据具体情况进行选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值