css 中 background-size 属性

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

1.background-size: 100% 100%;

1.图片会进行拉伸
2.如果只设置一个值，则第二个值会被设置为 “auto”，此时不会进行拉伸

2.background-size: cover;

1.把背景图扩展至足够大，使背景图完全覆盖背景区域(背景图某些部分可能无法显示在区域中)
2.图片不会拉伸

3.background-size: contain;

1.把背景图扩展至最大尺寸，使其宽度和高度完全适应内容区域(可能会在区域中留白)
2.图片不会拉伸

wytraining
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 背景属性
weixin_57797396的博客
06-08 186
CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color 背景颜色 background-image 背景图像 background-repeat 设置背景图像在页面的水平或者垂直方向平铺与否。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-position 背景图像定位 1、background-color属性值可以用十六进制、英文、rgb（） body { backg...
css background各种属性练习
b150461的博客
10-25 305
文中素材出自尚硅谷李立超讲师，看完视频后自己实验记录下。偷懒没有仔细整理，其实用了好几个知识点一块写的。留存，同时感谢尚硅谷的分享！ <!--background属性应用 overflow属性 浮动 position属性--> <!doctype html> <html> <head> <title></title> ...
常用的background背景属性详细~~干货
最新发布
weixin_74308843的博客
02-27 1230
background-image: url(./imags/搜索.png);我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片。与cover相反，会将图片等比例完全展示出来，因此可能会使。repeat-y同理。1 、百分比方式： 当。图片向两端对齐以填满容器，，默认平铺填满r容器。常配合使用在精灵图。
background-size属性详解
热门推荐
少油少盐不要辣
06-05 11万+
css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置） 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义： background-size 用来调整背景图像...
background-size的几种取值
L_csdn123的博客
08-15 3168
background-size的几种取值
在设置背景图片全屏时background-size: 100% 100%；和background-size: 100%；的区别，一个100%和两个100%的区别
雾隐雾现的至渝博客
02-23 3万+
                              background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)  
background-size中，100%和cover的区别
hsany330的专栏
05-25 1560
background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器 background-size：100% 100%;---按容器比例撑满，图片变形； background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。 当为百分比的时候，100%和100%，100%也会显示不一样的效果： background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩
CSS3背景样式详解（图像大小，图像位置等）
AIMing_byte的博客
01-10 3001
在CSS3中，新增了3个背景属性。
css中background-size属性使用介绍
12-13
background-size的值类型：1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。 background-size可以设置2个值，1个为必填，1个为可选。 其中第1个值用于指定背景图的width...
css3中背景尺寸background-size详解
09-25
background-size是css3提供的一个新特性，它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方
CSS3属性background-size使用指南
09-25
主要介绍了CSS3属性background-size使用指南,需要的朋友可以参考下
css background-attachment属性进阶
01-19
前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。 取值： scroll:默认值，背景图相对于...
background-size属性解释
2301_76665464的博客
10-02 594
然而，宽度因为父容器的高度等比放缩，从而适应屏幕，而此时高度损失有所变化。例：若父容器为1000px*500px，所引图片为1000px*1000px,则显示图片如下（虚线内不显示）将引入图片放缩，来适用父容器（取决于父容器的width与height哪个大)，铺满整个父容器，裁掉多余部分。若父容器·为2000px*500px，所引图片为1000px*1000px，则显示图片如下（虚线内不显示）该百分比是指的所引图片占父容器的百分比，所以第一个100%指的是所引图片宽度占屏幕100%
css3 background-size属性--ie兼容
zerlinda_c的博客
11-24 5660
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :
CSS3 新属性篇(五)：background-size属性
madman0621的博客
10-03 2万+
目录： background-size属性介绍 演示代码 background-size属性分析 设置固定尺寸的背景图片 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放 背景图片扩展并覆盖填充满整个所属元素区域 背景图片尺寸宽度和高度完全适应内容区域 一、background-size属性介绍 CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...
CSS:background-size产生的问题
qq_63605379的博客
01-23 630
相当于background-size：100% auto的写法，x轴100%铺满整个容器，y轴根据图片原来的比例，以及现有的宽度，来确定高度。这将保持背景图片的纵横比，并尽可能填充整个容器，但可能会裁剪部分图片。意味着背景图片会填充整个容器，并且在容器高度变化时，背景图片会相应地进行缩放，导致图片位置的变化。background-size：100%用这个就完美解决了 图片不变形缺点就是多余的部分会隐藏。当它的高度发生变化时背景图的位置会发生偏移 查阅了一些资料。
理解CSS3中的background－size(对响应性图片等比例缩放)
weixin_33725126的博客
03-10 2589
理解CSS3中的background－size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px－使用background－size:400px 200px缩放设置 固定宽度400px和高度200px－使用background-size:400px;的缩放设置，那么第二个参数会自...
css 中 background-size 属性设置一个100%和两个100%的区别
tiezhongyu2010的博客
02-23 1929
                              background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)  
iview表格设置表头： 使用 renderHeader在表头渲染按钮
wytraining
12-25 5002
1.表头显示的是一个按钮，可以使用 renderHeader 渲染： { renderHeader: (h, params) => { return h('span', [ h('Button', { props: { type: 'success', size: 'small' } }, '按钮1'), h('But
css中background-size属性
06-28
background-size属性是CSS中用来设置背景图片大小的属性。它可以设置背景图片的宽度和高度，可以使用像素、百分比、关键字等不同的单位进行设置。通过设置background-size属性，可以让背景图片自适应不同的屏幕尺寸...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值