CSS背景图片百分比定位不准问题

最新推荐文章于 2024-07-14 10:25:44 发布
最新推荐文章于 2024-07-14 10:25:44 发布
阅读量53 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67597542/article/details/134556301
版权

参考文章CSS中背景图片百分数定位-CSDN博客

主要问题是由于百分比定位会穿透到图片内，而不是定位到图片左上角。

例如X轴30%会从容器30%处定位图片，但定位的点是图片内30%距离

本人数学不好，索性用了个笨方法。把百分比换算成px使用，px不会有这个问题

例：X轴30% = 容器width*0.3 或者 容器width * ((this.toNumber(30%)/100)

FoodDog.卷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
背景图片百分比定位的简单应用
weixin_34233679的博客
12-15 83
 这个案例本来应该是巩固css2.1中背景图片的百分比定位，我偷懒用了css3的多背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <
解决CSS定位错乱/疑难杂症的终极绝招==》从样式污染开始排查
jiaohuizhuang6019的博客
09-12 700
解决CSS定位错乱/疑难杂症的终极绝招==》从样式污染开始排查
background-position中百分比是如何定位的？
请叫我二狗哥
04-28 1472
　　backgroud-positon使用百分比的定位十分怪异，它的值实际计算值并非与容器的宽度或者高度相乘。　　background-positon中容器坐标定位与百分比定位的换算：a——background-position的百分比数值；Px——容器坐标的定位位置；Dx——容器的宽（高）度值；dx——图片的宽（高）度值；换算公式：图片的background-position在容器坐标内的水平位...
css定位的百分比的算法,css定位中的百分比
weixin_29821223的博客
08-03 1314
----转载自自己在牛人部落中的相关文章---在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？一、margin，padding的百分比首先从css的设计意图说起，在浏览器默认的writing-mode: horizontal-tb;和direction: ltr;的情况下，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式...
前端背景图放置_CSS 背景图片排版
weixin_29748637的博客
12-24 1789
使用 CSS 套用背景图片到元素中可能是您前端设计过程中最常用到的功能。background 有非常丰富的属性，让我们可以针对不同的需求做设定。同时一个元素可以具有多张背景图片。如果您想要套用多张图片您可以直接在 background-image 属性值设定，不同图片路径之间只要用 , 分开即可。background-position 属性则是用来指定背景图片的位置，而这个属性非常值得深入研究，不...
移动端背景图css6,移动端适配之雪碧图(sprite)背景图片定位
weixin_29958569的博客
08-04 776
为了减少网络请求个数量，提高网站的访问速度，我们一般都会把一些小的图片合并成一张sprite图，然后根据background-position来进行定位。在web端由于是固定的大小与left 、top，所以定位起来会比较准确、简单。但是在移动端就不一样了，各种手机的屏幕大小不一样，很难做到使用sprite图然后根据background-position来定位。所以普遍的做法都是使用单张图片，然后使...
php背景定位实例,利用CSS定位背景图片实例介绍
weixin_31879641的博客
03-20 126
又如：这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。那么怎么来实现一张图片在不同的地方只显示其中的一部分呢，这就用到了我们今天要说的背景图片的定位问题。这个问题相信很多人都郁闷过，也经常有朋友问我，所以今天就系统的说一下：我们知道在用图片作为背景的时候，css要这样写，以div容器举例子，也可...
div+css 背景图片的定位取图问题详解
TSTEC的专栏（UI设计师）
10-24 1577
我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片，比如： 又如： 这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。 那么怎么来
CSS浮动定位与背景样式
qq_53300975的博客
07-17 395
代码】CSS浮动定位与背景样式。
css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）
蓝胖子的博客
03-14 1271
css 图片上使用position定位图片，缩小屏幕 图片会跑（已解决）
CSS背景图坐标定位详解及负数的使用技巧
09-25
总之，CSS背景图的坐标定位是一个强大且灵活的工具，通过理解坐标系统、负数的应用以及百分比计算，我们可以精确控制背景图在元素内的显示位置，从而实现丰富多样的网页设计效果。熟练掌握这些技巧，将有助于提升...
CSS中背景background-position负值定位深入理解[图文]
12-02
在提供的代码示例中，我们有三个不同的`div`元素，每个元素的背景图片定位都不相同： 1. `.style1` 的 `background-position: 0 0;` 表示图片的左上角与`div`的左上角对齐。这是默认设置。 2. `.style2` 的 `...
移动端使用 rem 单位时 css sprites 定位问题的解决
09-27
1. **利用CSS calc()函数**：计算背景位置时，可以使用`calc()`函数结合`rem`单位和百分比来减小定位误差。例如，`background-position: calc(-35px * 1rem/100px) 0;`。 2. **设置负边距**：对于那些边缘与父元素...
CSS 2.0 中文手册.rar_css_中文手册
09-25
2. 颜色和背景：支持十六进制、RGB、RGBA、HSL和HSLA颜色模式，以及背景图像、重复和定位。 3. 字体和文本：添加了字体家族、大小、行高、对齐、装饰和变形等控制。 4. 盒模型：定义了元素的边框（border）、内填充...
scss概念及使用
m0_74293254的博客
07-10 1136
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS 技巧与案例详解：开篇介绍
最新发布
粉丝们务必加入微信粉丝群
07-14 51
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1241
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
Chloeeeeeeee的博客
07-11 304
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
css 自定义变量 var()
Z_Wonderful的博客
07-10 206
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。
html div百分比背景,CSS网页设计：百分比进行背景图片定位
05-14
可以使用CSS中的background-position属性来实现百分比进行背景图片定位。 例如，如果想要将背景图片的水平位置定位在距离父元素左侧50%的位置，可以使用以下代码： ``` div { background-image: url('your-image-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值