background-size失效的问题及其基本用法

最新推荐文章于 2023-12-21 14:04:44 发布
最新推荐文章于 2023-12-21 14:04:44 发布
阅读量7.4k 收藏 4
点赞数 8
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44226088/article/details/109798935
版权

background-size的用法总结

CSS3 background-size 属性 指定背景图像的大小：
有四种值的写法
在这里插入图片描述
当背景图片出现太大或者太小的问题是可以使用cover属性自动铺满 部分背景图可能看不见
cover于contain的区别是 contain 当x 轴或者y轴自动适应以后 另一个轴将不再拉伸

background-size与background-repeat background-position的区别

background-repeat 是当图像没有完全铺满时 背景图片是否x y轴重复 不会拉伸图像
background-position 用于设置背景图片的位置 而不会拉伸图像

background-size失效的问题

当background-size位于background url属性的上方时将不起作用
在这里插入图片描述
效果图如下
在这里插入图片描述

background-size位于background url属性的下方时起作用
在这里插入图片描述
效果图如下:
在这里插入图片描述

前端-小明
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS完美解决前端图片变形问题的方法
11-21
在头条IT学堂看到CSS完美解决前端图片变形问题的文章，就记录分享下： 一、让图片的宽度或者高度等于容器的宽度或高度，多余的裁掉，然后让图片居中： <style type="text/css"> div{ width: 200px; height: 200px; overflow: hidden; border: 2px solid red; position: relative; } img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: tra
DIV多层嵌套margin-top的BUG问题
09-25
然而，由于Firefox的盒模型问题，这种方法可能会导致尺寸计算上的不一致，因此并不推荐。若选择此方法，需要确保这不会对其他布局产生负面影响。 这个现象实际上是由于浏览器之间的差异性，尤其是外边距折叠...
background-size属性无效
qq_33644670的博客
05-21 4976
这样写 background-size 不生效。 background-size: 100% auto; background: url("../../assets/bg.jpg") no-repeat top left #000; 必须这样写才行。 background: url("../../assets/bg.jpg") no-repeat top left #000; back...
Pyinstaller打包python工程中遇到的问题及其解决方法
ZhzetFor的博客
09-12 2188
1.python版本以及各个依赖包版本一览 版本问题导致的pyinstaller无法自动识别py文件中的依赖项会导致打包失败 2.打包多个py文件 由于pyinstaller 3.4中没有pyinstaller.exe，故在对应的项目目录下shift+右键打开对应的cmd窗口 输入(以我的项目为例子)：          pyinstaller makehuman.py -p app...
background-size不起作用
一小只虎的博客
01-16 1093
今天在使用背景图片时遇到一个小问题：我设置了background-size: 100% 100%，但背景图片没有拉伸铺满，我不知道为什么百度到的原因很多人说background-size写在background-image前面会不起作用，需要调换位置，反正我亲测没看出来位置不一样有啥区别。最后发现我自己的问题在图片上，我用了svg格式的图片，svg图片会锁定长宽比，解决方法可以换一张png格式或者jpg格式的图片，或者用你的编辑器打开图片，在svg标签里加上属性。
背景图平铺 background-size不生效
cy1502的博客
12-16 878
原代码 height：340px; background-image: url( ' ../ ../assets/empty.svg'); background-repeat: no-repeat; background-size: 100% 100%; 设置了不重复、background-size: 100% 100%，图片依旧居中在容器中间，不占满整个屏幕。 是因为svg不支持这个属性！！！！ 换成png或者jpg格式的就好了！ 搜了一下也没明白为啥，欢迎大佬看到给我留言~~~ ...
Qt：CSS样式属性
onj123的博客
04-24 1179
大小：px 颜色：#FF0000/red/rgb(255,0,0)/rgba(255,0,0,255) 透明色：transparent/rgba(0,0,0,0) 窗口大小 min-width: 10px; min-height:10px; max-width: 30px; max-height:30px; width: 20px; height:20px; 外间距 margin: 10px; m...
【小技巧】background-size不起作用
iuukai
02-14 2805
background-size:;失效多半是顺序错误导致，应该放在background:;下面 ❌错误写法： .test { width: 100px; height: 100px; background-size: 100%; /*无效*/ background: url('../img/test.jpg') no-repeat; } ✅正确写法： .test { width: 10...
background-size失效问题
qq_42240414的博客
05-03 2593
今天在做小程序的时候发现了个问题。 背景图的： background: url(xxxxxx.jpg) no-repeat; 没有占满整个屏幕，这题本来我会，只需要再加上： background-size: 100% 100%; 因为在两个页面上，我在两个页面都加上了这句话，结果就一个页面平铺了，另一个还是不管用。 后来发现是顺序问题 background: url(xxxxxx.jpg) no-repeat; background-size: 100% 100%; 只有这个顺序才是可以生效的，不知道被cs
【QT报错】 “Unknown property xxxx”
HearMeRoar_的博客
03-07 5443
QT关于“Unknown property xxxx”报错的解决方案分享
[css]background-size设置无效，算踩坑吗？
weixin_36089438的博客
09-27 9440
首先毋庸置疑，当背景是图片的时候可以利用background属性， 写法可以是 background:url(); 或者是background-image:url() 业务中在设置button的背景为图片的时候，因为前面button有样式 background:red ！important 所以在修改背景的时候也要加上了!importan，否则背景样式会设置不成功，仍然保持原...
关于css中line-height(行高)设置无效的问题的解决方法
12-13
在CSS（层叠样式表）中，`line-height` 是一个非常重要的属性，它用于设置元素内文本行之间的垂直间距。...此外，对于复杂的布局，还可以考虑使用Flexbox或Grid布局来更精确地控制元素及其内容的排列。
layer弹出层中H5播放器全屏出错的解决方法
08-31
为使预览图始终填满容器，我们可以使用CSS配合`background-size: cover`属性。如果预览图尺寸不足，一种方法是设置`poster`为一个透明的1x1像素的图片，然后通过CSS定义video元素的背景并覆盖它： ```html ...
table设置背景图片，不能100%显示解决方法
09-28
- 如果希望背景图片始终铺满单元格，可以使用CSS3的`background-size`属性，如`background-size: cover;`。这将使背景图片根据单元格的大小进行缩放，确保完全覆盖。 6. **浏览器兼容性**： - 不同浏览器对CSS...
CSS3中的Transition过度与Animation动画属性使用要点
12-13
background: blue; animation-name: demo; /* 动画属性名 */ animation-duration: 10s; /* 动画持续时间 */ animation-timing-function: ease; /* 运动形式 */ /* 其他可能的属性，如 animation-iteration-...
【css】background-size 失效原因
最新发布
weixin_41747256的博客
12-21 336
今天写项目，无论background-size 怎么设置背景图片都不能占据100%。最后发现原来background-size写在背景图片引入之前无效。
关于THINKPHP VIEW视图 使用background-size cover失效的问题解决
BowenXu11的博客
05-02 357
关于THINKPHP VIEW视图 使用background-size cover失效的问题解决 这几天写一个小的web程序，由于没有前端辅助，所以一切都自己搞定 找了一圈，发现了一个layuimini的开源框架，是基于layui的模版框架。 非常适合自己。 没想道第一个login就遇到了问题 描述一下，layuimini的login.htm css样式是写在html内部的 copy过来之后，发现 backgorund-size属性 cover失效 一番尝试的过程，一开始曾经怀疑是本地的apache有问题
关于vue+elementui设置div背景图片填充不生效问题
菜鸡奋斗ing的博客
07-15 5862
正常css填充div图片背景 .itemDiv { background-size: 100% 100%; background-repeat: no-repeat; background-image: url(../../images/Tickets_background.png); } 但是在vue项目中不生效，需要改成如下。 .tip-div { positio...
关于QSS 看这一篇就够了！
热门推荐
HelloKandy's Blog
03-16 1万+
1、QSS介绍 自定百度。 2、QSS常用属性大全 Qss背景属性(Background) background 在一个声明中设置所有的背景属性。 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 设置元素的背景图像。 background-position 设置背景图像的开始位置。 background-repeat 设置是否及如何重复背景图像。
background-size不同属性及其含义
05-31
background-size是CSS中用于设置背景图片大小的属性，它有以下几个不同的属性及其含义： 1. cover：将背景图片等比例缩放以完全覆盖背景区域。如果背景图片的宽高比与背景区域的宽高比不同，会有部分图片超出背景区域。 2. contain：将背景图片等比例缩放以完全包含在背景区域内。如果背景区域比背景图片大，背景图片会被缩小以适应背景区域。 3. length：设置背景图片的宽度和高度，可以使用具体的像素或百分比值。 4. auto：设置背景图片的宽度或高度为自动计算，根据背景区域的大小和背景图片的宽高比计算出最佳大小。 5. percentage：设置背景图片的宽度或高度为背景区域宽度或高度的百分比值。 使用background-size属性可以控制背景图片的大小和填充方式，从而实现不同的效果，如背景图片的缩放、裁剪、平铺等。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值