css 背景图片 background-size属性值

最新推荐文章于 2024-09-23 11:30:52 发布
最新推荐文章于 2024-09-23 11:30:52 发布
阅读量275 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43915401/article/details/112567612
版权
1 length固定值

背景图片宽度 背景图片高度
如果只有一个值，第二个设为auto

2 百分比

背景图片对于背景定位区域宽度的百分比 背景图片对于背景定位区域高度的百分比
如果只有一个值，第二个设为auto

3 cover

保持图像纵横比，并将图像缩放成完全覆盖背景定位区域的最小大小，多余部分不会显示
在这里插入图片描述

4 contain

保持图像纵横比，并将图像缩放成适合背景定位区域的最大大小，可能会存在白边
在这里插入图片描述

梦想身高1米8
关注
专栏目录
踩坑(css3+h5)_background-size属性
qq_43260366的博客
02-08 1518
图片并不能撑开盒子，要想显示背景图片，需要图片设置宽高或有足够的内容撑开盒子的前提下。[1] 当元素没有设置background-size属性，或是设置background-size:auto auto时，会按照图片默认的宽高进行展示图片宽高 大于 元素宽高 -> 超出元素宽高的图片会被截断(不显示)图片宽高 小于等于 元素宽高 -> 正常展示(展示位置以及是否平铺需要看background-position以及background-repeat)
css中background-size属性使用介绍
12-13
其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto高度自动 (通常默认高度是auto自动,自适用内容而增高,通常如果想高度自适应不用设置) ...
css 中 background-size 属性
wytraining
11-18 2077
1.background-size: 100% 100%; (如果只设置一个值，则第二个值会被设置为 “auto”) 2.background-size: cover; 把背景图像扩展至足够大，使背景图像完全覆盖背景区域(某些部分也许无法显示在背景定位区域中) 3.background-size: contain; 把图像图像扩展至最大尺寸，使其宽度和高度完全适应内容区域(可能会在定位的区域中留白) ...
【CSS】background-size 属性详解
最新发布
lph159的博客
09-23 2912
属性允许你定义背景图片的大小，以适应元素的尺寸和页面布局。该属性能够通过多种方式设定背景图像的缩放比例，提供了从完全覆盖到按比例缩放的多种方案。auto：默认值，保持背景图片的原始大小。cover：背景图片将被缩放到足够大，以完全覆盖元素的背景区域，即使图片会被裁剪。contain：背景图片将被缩放到足够小，以完整显示在元素背景中，且不会被裁剪。指定尺寸：你可以直接设定背景图片的宽度和高度，如或50% 50%，甚至还支持calc()函数进行动态计算。属性为开发者提供了强大的背景图像控制能力。
CSS3 新属性篇(五)：background-size属性
热门推荐
madman0621的博客
10-03 2万+
目录： background-size属性介绍 演示代码 background-size属性分析 设置固定尺寸的背景图片 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放 背景图片扩展并覆盖填充满整个所属元素区域 背景图片尺寸宽度和高度完全适应内容区域 一、background-size属性介绍 CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...
background-size属性详解
qq_33582240的博客
02-18 1015
background-size是css3中新增的属性，background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。 background-size: length|percentage|cover|contain; length 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二
css3 background-size属性--ie兼容
zerlinda_c的博客
11-24 5734
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :
css3中背景尺寸background-size详解
09-25
总而言之，CSS3的background-size属性为前端开发人员提供了更多的灵活性来处理网页中的背景图像，无论是通过像素、百分比、auto值，还是关键字cover和contain，都可以根据具体需求来细致地调整背景图像的尺寸，从而...
CSS3的background-size属性，实现响应式式图片等比例缩放。
01-23
总之，CSS3的`background-size`属性是响应式设计中的一个强大工具，它能确保背景图片在不同设备上等比例缩放，保持视觉一致性。通过灵活地选择合适的值，我们可以创建出适应性强、视觉效果出色的网页。在实际开发中...
CSS3之背景尺寸Background-size使用介绍
09-25
CSS3中的background-size属性是用于控制元素背景图像的尺寸。无论背景图片的原始尺寸如何，都可以通过这个属性来调整其在元素中的显示大小。background-size属性的引入为网页设计提供了更多的灵活性。 1. 属性值...
background-size属性
hugejihu9的专栏
01-16 363
文章来自：源码在线https://www.shengli.me/css/589.html   CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。 你指定的大小是相对于父元素的宽度和高度的百分比的大小。     代码：   效果图：          ...
background-size属性值
weixin_43787257的博客
11-24 2170
使用background-size指定背景图像的大小。 像素px：指定背景图片的长宽； 百分比%：相对于父元素的宽度和高度的百分比大小； auto:背景图片保持原来的大小； cover:按照原图片的比例，扩展至足够大，使图片完全覆盖整个背景区域（可能造成图片部分不可见）； contain:把图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域（可能造成图片失真，不再是原来的比例）；  ...
background-size的一些属性
miaomiaolaoxiong的博客
10-18 260
1.auto图片原始尺寸 2.number自己设置具体的值 例：background-size:100px 100px; 3.percentage设置百分比 0-100% 4.cover铺满整个容器（图片比容器小） 图片比容器小又不想background-repeat时，一张图铺满容器。但是会图片失真。 5.contain铺满整个容器（图片比容器大） 与cover相同会图片失真。 ...
CSS之background-size属性
tian361zyc的博客
06-22 466
CSS
background-size的几种取值
gcyaozuodashen的博客
12-04 2218
3、background-size:cover: 图片保持比例放大或缩小使X轴Y轴都铺满整个容器，但图片超出容器部分会被剪裁掉，图片不变形。4、background-size:contain: 图片保持比例放大或缩小，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。2、background-size:100% 100%: 图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器，图片可能会变形。
css中background-size属性
z . s . j
09-24 1万+
background-size的值类型：1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。 　　background-size可以设置2个值，1个为必填，1个为可选。 　　其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto高度自动
css-background-size
adx5279的博客
04-14 118
http://sentsin.com/web/939.html background-size语法w3c对background-size的语法规定如下： 属性名: background-size属性值: <bg-size>* 其中 bg-size = [ <length> | <percentage> | auto ]{1,2} | cover |...
css背景图片background-size
10-12
background-size是CSS属性，用于设置背景图片的尺寸大小。它有几种不同的属性值可以使用： 1. cover：背景图片将被缩放到足够大以覆盖整个容器，并保持比例不变。这可能会导致图片被裁剪或拉伸。 2. contain：背景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值