background-size

最新推荐文章于 2024-02-27 20:42:40 发布
最新推荐文章于 2024-02-27 20:42:40 发布
阅读量249 收藏
点赞数
分类专栏： 前端学习小记 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coolchaobing/article/details/126071529
版权

background-size用于设置背景图片的大小

  • auto：默认值, 以背景图本身大小显示；
  • cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见；
  • contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比；
  • <percentage>：百分比，相对于背景区（background positioning area）；
  • length：具体的大小，比如100px；
    在这里插入图片描述
    在这里插入图片描述
coolchaobing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3背景样式详解（图像大小，图像位置等）
AIMing_byte的博客
01-10 3001
在CSS3中，新增了3个背景属性。
CSS3 新属性篇(五)：background-size属性
madman0621的博客
10-03 2万+
目录： background-size属性介绍 演示代码 background-size属性分析 设置固定尺寸的背景图片 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放 背景图片扩展并覆盖填充满整个所属元素区域 背景图片尺寸宽度和高度完全适应内容区域 一、background-size属性介绍 CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...
background-size 之 背景图的尺寸设置
qq_45288176的博客
06-16 1万+
引：background-size: 没有设置任何尺寸时使用图片本身的大小，宽度和高度都是auto默认值可以用px设置成具体的值，也可以使用百分比各种不同比例的适配问题，完美适配很少发生背景图1和背景图2 you红色边框分隔开来背景图1背景图2......
CSS3背景（background-size、background-origin、background-clip）圆角
m0_64460142的博客
04-04 2375
1.background-size，规定背景图像的尺寸 当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下： <style> .box{ width: 400px; height: 200px; border: 2px solid rgb(76, 234, 234); ...
常用的background背景属性详细~~干货
最新发布
weixin_74308843的博客
02-27 1230
background-image: url(./imags/搜索.png);我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片。与cover相反，会将图片等比例完全展示出来，因此可能会使。repeat-y同理。1 、百分比方式： 当。图片向两端对齐以填满容器，，默认平铺填满r容器。常配合使用在精灵图。
background-size使用详解
09-25
主要介绍了background-size使用详解,需要的朋友可以参考下
css中background-size属性使用介绍
09-25
在CSS中，`background-size`属性是一个非常重要的样式，它用于控制背景图像的尺寸，从而影响元素背景的显示效果。这个属性允许我们精确地设定背景图像的宽度和高度，或者使用预定义的值来实现特殊效果。以下是关于`...
css3中背景尺寸background-size详解
01-19
定义：规定背景图像的尺寸 background-size的类型 background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是...JavaScript语法：object.style.backgroundSize=60px 80px 语法： background-size: <
background-size的几种取值
gcyaozuodashen的博客
12-04 1471
3、background-size:cover: 图片保持比例放大或缩小使X轴Y轴都铺满整个容器，但图片超出容器部分会被剪裁掉，图片不变形。4、background-size:contain: 图片保持比例放大或缩小，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。2、background-size:100% 100%: 图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器，图片可能会变形。
css中background-size属性cover、contain、100%的含义案例详解
wangyining070205的博客
02-14 7471
昨天学前端，看到 css中的background-size属性，忽然对cover、container属性值有点蒙，具体到底什么显示效果有点糊涂。 看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：container，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。 一、背景区域和背景图像宽高比例相等 在div中，设置其背景图像，如果
background-size属性解释
2301_76665464的博客
10-02 594
然而，宽度因为父容器的高度等比放缩，从而适应屏幕，而此时高度损失有所变化。例：若父容器为1000px*500px，所引图片为1000px*1000px,则显示图片如下（虚线内不显示）将引入图片放缩，来适用父容器（取决于父容器的width与height哪个大)，铺满整个父容器，裁掉多余部分。若父容器·为2000px*500px，所引图片为1000px*1000px，则显示图片如下（虚线内不显示）该百分比是指的所引图片占父容器的百分比，所以第一个100%指的是所引图片宽度占屏幕100%
background-size值：cover、100%和contain的区别
热门推荐
菜菜的博客
04-30 2万+
background-size 属性规定背景图像的尺寸。 先看看W3C的解释： background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 图片右边有空白区域 background-size：100% 100%;---按容器比例撑满，图片变形； 图片被横向拉伸 background-s...
css怎么设置背景图片自适应大小
Jack, what else can you do besides holding your little darling?
07-12 1万+
css怎么设置背景图片自适应大小
CSS 背景图自动缩放background-size: cover；
HandsomeDanielWu的博客
10-07 1379
CSS 背景图自动缩放background-size: cover;
CSS —— 背景图片填满DIV、鼠标滑过放大图片
ZhaoYLi 的编程学习笔记
11-30 9531
1、让背景图片填满DIV 应用background-size属性可以设置背景图片填满整个div，background-size取值及解释如下： （1）、background-size:cover MDN文档解释说明：缩放背景图片以完全覆盖背景区，可能背景图部分看不见。（关键：它会保持图片的宽高比；当图片和容器具有不同的尺寸时，图片左、右、顶或底部会被裁剪） 示例： .case { backgr...
background-size中100%和cover的区别？
m0_38109616的博客
03-28 1165
background-size中100%和cover的区别？ background-size：100% 100%;—按容器比例撑满，图片变形； background-size：cover;—把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。 当引入背景图片，高度和宽度设置成100%时，图片还是很大，可以设置background-size:cover;使图片放大到适合元素容器的尺寸！ ...
背景图片大小（background-size）cover、100%和contain的区别
weixin_46544600的博客
12-28 3000
三者都是来定义背景图显示尺寸大小的，三者之间的区别： cover：是按照等比缩放铺满整个区域。优点：图片不会变形。 缺点：如果显示如果显示比例和显示区域的比例相差很大某些部分会不显示，比如长度比宽度大很多，则宽度左侧会有一部分不显示。 100%：长宽100%显示，可能会拉升图片导致图片变形。 contain：也是等比缩放，按照某一边来覆盖显示区域的，会有白边 ...
background-size值为cover和值为100%的区别
zengyonglan的博客
01-06 8762
background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。IE8及以下版本用滤镜来兼容background-size如下:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizi

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值