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

最新推荐文章于 2024-09-05 21:51:51 发布
最新推荐文章于 2024-09-05 21:51:51 发布
阅读量8.3k 收藏 4
点赞数 10
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44226088/article/details/109798935
版权
本文主要总结了CSS3 background-size属性的用法，介绍了其四种值的写法，如cover可自动铺满背景图，还阐述了它与background-repeat、background-position的区别，前者控制图片是否重复，后者设置图片位置，最后指出background-size位于background url属性上方时会失效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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属性的下方时起作用
在这里插入图片描述
效果图如下:
在这里插入图片描述

关于背景图片background-attachment: fixed属性在Chrome浏览器中失效的问题解决。
好名字都被抢完了的博客
06-07 3025
关于背景图片background-attachment: fixed;属性在谷歌浏览器中失效的问题解决。 最近在做文件打印的功能操作。我选择使用简单易用的window.print()来打印整个页面。具体操作网上有很多相关的方法，这里不再一一叙述。只在此说一下在打印背景图片时遇到的问题及解决方法。 首先，背景图片设置好之后我对其进行平铺和固定设置 如图所示。 我的本意是将一个不大的图片平铺整个页面，并且打印时即使页面内容过多导致分页也能继续显示背景图片。但我使用谷歌浏览器时，出现问题。background-a
关于Vue3中对于 background-image 属性的使用，详解和最佳实践
繁若华尘的博客
02-18 1875
有效解决 Vue3 中 background-image 的常见问题，同时兼顾开发效率和运行时性能。
background-size 失效
u012997186的博客
05-17 7092
对前端不太懂，在使用background-size 时发现无效，用什么值都没作用，最后把background-size放到了background:url(xxx) 的后面就生效了，就是 这样写的话 background-size 没效果 { background-size:contain; background:url(xxx); } 把两个交换下顺序，即换成下面这样就生效了 ...
【小技巧】background-size不起作用
iuukai
02-14 3010
background-size:;失效多半是顺序错误导致，应该放在background:;下面 ❌错误写法： .test { width: 100px; height: 100px; background-size: 100%; /*无效*/ background: url('../img/test.jpg') no-repeat; } ✅正确写法： .test { width: 10...
【css】background-size 失效原因
weixin_41747256的博客
12-21 659
今天写项目，无论background-size 怎么设置背景图片都不能占据100%。最后发现原来background-size写在背景图片引入之前无效。
background-size不起作用
一小只虎的博客
01-16 1290
今天在使用背景图片时遇到一个小问题：我设置了background-size: 100% 100%，但背景图片没有拉伸铺满，我不知道为什么百度到的原因很多人说background-size写在background-image前面会不起作用，需要调换位置，反正我亲测没看出来位置不一样有啥区别。最后发现我自己的问题在图片上，我用了svg格式的图片，svg图片会锁定长宽比，解决方法可以换一张png格式或者jpg格式的图片，或者用你的编辑器打开图片，在svg标签里加上属性。
background-size失效
weixin_42349568的博客
07-05 1209
background-size要写在background-image后面，否则background-size不会生效 如： .content .lineTop .ulBox2 li .comBox2:nth-of-type(3) .imgBox{ background-size: cover; background: url(img3/3.jpg) no-repeat; } 就会无效 需要把 background-size写在background-
background-size失效问题
qq_42240414的博客
05-03 2721
今天在做小程序的时候发现了个问题。 背景图的： background: url(xxxxxx.jpg) no-repeat; 没有占满整个屏幕，这题本来我会，只需要再加上： background-size: 100% 100%; 因为在两个页面上，我在两个页面都加上了这句话，结果就一个页面平铺了，另一个还是不管用。 后来发现是顺序问题 background: url(xxxxxx.jpg) no-repeat; background-size: 100% 100%; 只有这个顺序才是可以生效的，不知道被cs
原本的伪类样式是a:after{content: ""; display:block;width:40px;height:40px;background-image:url("引入了雪碧图的图片路径");background-size:520px 320px；background-position: -80px -150px;background-repeat:no-repeat; transition;transform 0.3s ease-in-out;position: absolute; top:0;rigth;0; transform:rotate(-180deg) ；}
最新发布
03-26
background-size:520px 320px； /* 中文分号错误 */ background-position: -80px -150px; background-repeat:no-repeat; transition;transform 0.3s ease-in-out; /* 语法错误 */ position: absolute; top:0;...
[转]完美的背景图全屏css代码 – background-size:cover?
weixin_30498921的博客
03-16 2579
写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域 保持图像的纵横比（图片不变形） 图片居中 不出现滚动条 多浏览器支持 以图片bg.jpg为例 方法一、最简单，最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和...
关于css中line-height(行高)设置无效的问题的解决方法
12-13
在CSS（层叠样式表）中，`line-height` 是一个非常重要的属性，它用于设置元素内文本行之间的垂直间距。...此外，对于复杂的布局，还可以考虑使用Flexbox或Grid布局来更精确地控制元素及其内容的排列。
[css]background-size设置无效，算踩坑吗？
weixin_36089438的博客
09-27 9612
首先毋庸置疑，当背景是图片的时候可以利用background属性， 写法可以是 background:url(); 或者是background-image:url() 业务中在设置button的背景为图片的时候，因为前面button有样式 background:red ！important 所以在修改背景的时候也要加上了!importan，否则背景样式会设置不成功，仍然保持原...
background-size属性无效
qq_33644670的博客
05-21 5139
这样写 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...
【CSS】background样式没有生效
qq_43720551的博客
09-05 1225
设置了background样式却没有生效
背景图平铺 background-size不生效
cy1502的博客
12-16 967
原代码 height：340px; background-image: url( ' ../ ../assets/empty.svg'); background-repeat: no-repeat; background-size: 100% 100%; 设置了不重复、background-size: 100% 100%，图片依旧居中在容器中间，不占满整个屏幕。 是因为svg不支持这个属性！！！！ 换成png或者jpg格式的就好了！ 搜了一下也没明白为啥，欢迎大佬看到给我留言~~~ ...
关于THINKPHP VIEW视图 使用background-size cover失效的问题解决
BowenXu11的博客
05-02 415
关于THINKPHP VIEW视图 使用background-size cover失效的问题解决 这几天写一个小的web程序，由于没有前端辅助，所以一切都自己搞定 找了一圈，发现了一个layuimini的开源框架，是基于layui的模版框架。 非常适合自己。 没想道第一个login就遇到了问题 描述一下，layuimini的login.htm css样式是写在html内部的 copy过来之后，发现 backgorund-size属性 cover失效 一番尝试的过程，一开始曾经怀疑是本地的apache有问题
css background-size htc无效的几种情况
01-20 580
使用了兼容ie8的background-size htc,如果是display:block的元素,它的背景显示是没问题的,但是如果这个元素display:none,则背景不显示,或者,这个元素是个伪元素,也不显示,迫于赶工期,不使用背景了,直接增加一个图片元素,一切都ok了 <!-- background-size-polyfill v0.2.0 | (c) 20...
vue div backgroundSize 不起作用的解决办法
阿豪
02-27 1057
原文链接: vue div backgroundSize 不起作用的解决办法 ...
解决css3中background-size属性不…
xingxingxx2014的专栏
10-31 1405
我们经常遇到这样的问题，需要将一张图片平铺做为一个div块的背景。 这个时候就需要用到background-size这个属性了。 div{ background: url(..) no-repeat 0; background-size: cover; } 可是background-size这个属性是不兼容ie9以下的浏览器的。为了达到 兼容的目的，改进代码如下： div{ background:
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值