background-size: contain；不生效的问题

最新推荐文章于 2024-09-23 11:30:52 发布
原创 最新推荐文章于 2024-09-23 11:30:52 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在CSS中正确设置背景图片大小的方法。通过将background-size属性设置为contain，并确保其位于background:url之后，可以实现背景图片的恰当显示，且保持图片原始宽高比。

把background-size: contain;放在background: url(“xxxx.png”) no-repeat;后面就行了。

.title {
	//这样是不会生效的
	background-size: contain;
  	background: url("xxx.png") no-repeat;
}

.title {
	//这样才会生效
  	background: url("xxx.png") no-repeat;
	background-size: contain;
}
background-size 失效
u012997186的博客
05-17 7147
对前端不太懂，在使用background-size 时发现无效，用什么值都没作用，最后把background-size放到了background:url(xxx) 的后面就生效了，就是 这样写的话 background-size 没效果 { background-size:contain; background:url(xxx); } 把两个交换下顺序，即换成下面这样就生效了 ...
常用的background背景属性详细~~干货
weixin_74308843的博客
02-27 3229
background-image: url(./imags/搜索.png);我们在平时写代码较用的一种背景排布。表示背景图片x轴与y轴占满该容器的背景，会用图片原来的尺寸放大所缩小到占满容器，cover可能会使背景图片。与cover相反，会将图片等比例完全展示出来，因此可能会使。repeat-y同理。1 、百分比方式： 当。图片向两端对齐以填满容器，，默认平铺填满r容器。常配合使用在精灵图。
css3 background-size属性--ie兼容
zerlinda_c的博客
11-24 5814
background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :
background-size： contain 与cover
hehexu_的博客
11-18 4763
一：background-size： contain 与cover的区别： 作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域 ...
background-size:contain 和cover-----------------------------------------background-attachment
weixin_30911809的博客
02-15 162
background-size:contain 和cover 相同点： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同点：1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；（图片不完整） 　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白...
.continer background-image: url('./images/login.png') background-size: 'cover' background-position: 'center center' background-repeat: 'no-repeat' 背景图片生效了 为什么 重复了 一个屏幕四个图片
06-19
size**（引用[2]）-`cover`：扩展图片填满元素（保持比例）-`contain`：完整显示图片（保持比例）-具体尺寸：`backgroundSize:'100%100%'`（可能拉伸）2.**background-position**（引用[4]）```...
background-position: 0; background-repeat: no-repeat;background-size: 100%; 100%;background-image: url('/static/index/indexbg00.png'); uniapp开发iOS手机端 这样设置图片能生效吗
04-23
好的，我现在需要解决用户在uniapp开发中，针对iOS手机端设置背景图片时可能遇到的样式不生效的问题。用户提到的属性包括background-position、background-repeat、background-size和background-image，需要确认这些...
#pbMaintainBtnAxis{ color: transparent; background-color: transparent; background-image: url(:/recources/icons/Motor_Limit_Mode_Normal.svg); /* 指定图片路径 */ background-origin: content; /* 图片基于内容区域 */ background-position: center; /* 图片定位在顶部 */ background-size: cover; padding-top: 8px; /* 添加顶部内边距 */ background-repeat: no-repeat; /* 禁止图片重复 */ outline: none; /* 防止状态变化时轮廓重现 */ border: none; /* 双重保险 */ } #pbMaintainBtnAxis::pressed{ color: transparent; background-color: transparent; background-image: url(:/recources/icons/testA_check.svg); background-origin: content; /* 图片基于内容区域 */ background-position: center; /* 图片定位在顶部 */ background-size: cover; padding-top: 8px; /* 添加顶部内边距 */ background-repeat: no-repeat; /* 禁止图片重复 */ outline: none; /* 防止状态变化时轮廓重现 */ border: none; /* 双重保险 */ }为什么不生效
最新发布
10-25
如果不生效，说明问题可能在于选择器或按钮本身。 其他注意事项： 1. 在Qt中，如果按钮被禁用，样式可能不会改变，所以确保按钮处于可用状态。 2. 如果按钮是自定义控件，确保它正确地处理了状态。 总结：首先...
#btn_testA{ color: transparent; background-color: transparent; background-image: url(:/recources/icons/testA_normal.svg); /* 指定图片路径 */ background-origin: content; /* 图片基于内容区域 */ background-position: center; /* 图片定位在顶部 */ background-size: cover; padding-top: 8px; /* 添加顶部内边距 */ background-repeat: no-repeat; /* 禁止图片重复 */ } #btn_testA:checked { color: transparent; background-color: transparent; background-image: url(:/recources/icons/testA_check.png); /* 指定图片路径 */ background-origin: content; /* 图片基于内容区域 */ background-position: center; /* 图片定位在顶部 */ background-size: cover; padding-top: 8px; /* 添加顶部内边距 */ background-repeat: no-repeat; /* 禁止图片重复 */ }为什么check状态生效不了
10-21
我们正在分析一个CSS问题：按钮`#btn_testA`的checked状态样式不生效。 提供的CSS代码片段如下： ``` #btn_testA{ color: transparent; background-color: transparent; background-image: url(:/recources/...
background-image: url('./images/login.png') background-size: 'cover' background-position: 'center center' background-repeat: 'no-repeat' 我也是这样设置的 为什么还是重复了
06-19
}```代码示例（JSX）：```jsx<divstyle={{backgroundImage:`url(${require('./images/login.png')})`,//或者直接使用字符串backgroundSize:'cover',backgroundPosition:'center',backgroundRepeat:'no-repeat',width...
CSS 的background-size：cover属性值和contain属性值
单枪匹码
12-12 1万+
1、语法：background-size：length|percentage|cover|contain； 2、参数：参考文章：菜鸟教程 3、浏览器支持： 4、标签定义及使用说明： 5、通常情况下都是使用第1个和第2个属性值，那么后两个如何使用呢？我们来写一个小demo记录一下： <div id="div4"></div> #div4{ width: 1000px...
background-size在ios下失效？
这个昵称没有被占用吧的博客
05-07 1997
最近天天被动画和音频折磨~个人比较喜欢用css，所以需求中碰到广告牌闪烁的需求，果断使用了css3的动画，代码如下： #ad { animation: changeAd 1s infinite; } @keyframes changeAd { from { background: ad1.png no-repeat center center; background-size: 100...
CSS 背景尺寸 background-size属性
歪脖先生的博客
02-17 9958
背景尺寸在CSS3之前，我们不能指定背景图像的显示大小，一般是按图像的原始尺寸显示。在CSS3中，通过 background-size属性，可以设置背景图像的显示尺寸。background-size属性的值可以是预定义关键字 cover | contain，也可以是使用长度值、百分比或 auto 定义背景图像的尺寸，长度和百分比不允许负值。使用预定义值时，cover 表示背景图像完全覆盖容器的背景...
background-size:cover | contain；
04-12 1568
background-size:cover | contain; 原图 不使用background-size 第一张背景图片：600 × 431第二张背景图片：426 × 600每个元素的大小：350 × 350 background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素保持背景图片的宽高比
说说background-size:cover;与background-size:contain的区别
热门推荐
Allenyhy的博客
09-04 3万+
1.background-size:cover 官方background-size:cover;的解释是这个样子的，截图如下所示： 解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。             2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。 下面举一个栗子来说明这种情况： 首先原始的背景图片是这样的。 而设置b...
【CSS】background-size 属性详解
lph159的博客
09-23 1万+
属性允许你定义背景图片的大小，以适应元素的尺寸和页面布局。该属性能够通过多种方式设定背景图像的缩放比例，提供了从完全覆盖到按比例缩放的多种方案。auto：默认值，保持背景图片的原始大小。cover：背景图片将被缩放到足够大，以完全覆盖元素的背景区域，即使图片会被裁剪。contain：背景图片将被缩放到足够小，以完整显示在元素背景中，且不会被裁剪。指定尺寸：你可以直接设定背景图片的宽度和高度，如或50% 50%，甚至还支持calc()函数进行动态计算。属性为开发者提供了强大的背景图像控制能力。
background-size 导致 background-position 失效
spirit_cccc的博客
02-06 1373
部分情况下 background-size 导致 background-position 失效结论原理起因基础知识验证 结论 一、background-size 设置为 contain/cover 的情况下，会导致background-position 设置的百分比失效 background-size 设置为100% 的方向上 background-position 设置的百分比失效 具体表现如下...
CSS background-size ：contain与cover区别
ee22ee的博客
01-30 1944
css background-size设置contain与cover区别
背景图片设置
djp0910的博客
04-21 317
1.背景图片宽度问题 设置为背景图片的图片不够宽，采用的又是不重复的方式，以至于不能完全覆盖body或者父元素，这种情况下可以设置background-size; background-size:length|percentage|cover|contain; length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "au...
background-size: auto; 未生效
05-20
` 或 `background-size: contain;`。 3. 确保你的图片有足够的空间来适应元素的大小。如果图片太小，`background-size: auto;` 可能不会生效。 4. 如果你的图片是通过 `background-image` 属性设置的，请确保图片的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值