backgroundPositionX和backgroundPositionY兼容性问题

最新推荐文章于 2023-06-20 19:07:59 发布
最新推荐文章于 2023-06-20 19:07:59 发布
阅读量273 收藏
点赞数
分类专栏： javascript兼容性 文章标签： IE 浏览器 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/froshloveC/article/details/83522764
版权

在某些时候我们需要通过backgroundPositionX和Y来直接翻转背景图片非常方便

但是你会发现，在FF和Oprea里面就不行了

 

你可能又会尝试通过使用backgroundPosition来同时设置两个参数来变化背景图片的位置，但是还是失败

因为IE也不支持backgroundPosition函数

 

解决办法，就是判断浏览器是IE还是别的

如果是IE，直接通过backgroundPositionX和Y还设置css

如果不是就用backgroundPosition就行了

但是需要注意的是

这几个属性都不是数值型的，为了让浏览器更好的识别

最好都写成字符串形式比如obj.style.backgroundPosition  = "100px 20px";这样来设置就行了

然后你获取数值型的你可以直接将backgroundPosition中的px进行replace替换，这样变成"100 20"之后，直接再用split就可以了，直接就能获取你需要的两个不同参数进行数学运算

froshloveC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS-背景位置-x | background-position-x
weixin_33910385的博客
09-12 2011
ackground-position-xCSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性background-origin相关。更多信息请查看background-position属性，这个用的比较普遍。 /* Keyword values */ background-position-x: left; backgro...
CSS-背景位置-y | background-position-y
weixin_33939843的博客
09-12 1629
background-position-y属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过background-origin定义的背景层的原点进行定位. 需要获得更多的信息可以查看background-position属性,这个属性已经得到了长久且广泛的支持. 注意:background-position-y...
css中的background-position属性
baidu_24743861的博客
04-19 3575
1、background-position: x y ; background-position:100px 30x; 表示距离左边100像素，距离上边30像素 background-position:50% 10%; 在X轴居中，距离上方10%的距离 background-position:left top;左上（X轴的值可为left,center,right 、y轴的值可为left,ce...
css中background系列详解
冰雪为融的博客
05-29 1931
研究了background相关的属性，虽然很简单，但有些还是不知道，整理出来系统的学习一下，也会更好的掌握这些知识点（细节决定成败，哈哈）background相关的属性有（把比较常用的放在前面不做过多的解释）：background、background-color、background-image、background-repeat、background-attachment、background...
CSS基础知识（一）
最新发布
weixin_54799350的博客
06-20 292
复习完HTML，接下来打算把CSS也过一遍，学过的知识也要经常复习。本文具体介绍了CSS选择器以及三大特性，还有字体、文本、背景等基础样式。
css background-position属性
且听风吟的博客
06-08 2158
`background-position` 属性用于设置或获取元素背景图像相对于原点的初始位置。
【JavaScript源代码】Vue3实现图片放大镜效果.docx
12-30
backgroundPositionX: position.backgroundPositionX, backgroundPositionY: position.backgroundPositionY, }]" v-if="isShow" > class="middle" ref="target" > :src="imageList[curId]" alt="" />...
js获取某元素的class里面的css属性值代码
12-02
return obj.currentStyle.backgroundPositionX + " " + obj.currentStyle.backgroundPositionY; } } if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView....
页面样式调试必备-style属性
08-25
- `backgroundPosition`: 定义背景图像的初始位置，可以通过`backgroundPositionX`和`backgroundPositionY`分别设置X轴和Y轴的位置。 - `backgroundRepeat`: 控制背景图像是否及如何重复。 **边框和边距属性**： - ...
实现IE6下PNG背景透明的方法
01-23
在早期的网页设计中，IE6（Internet Explorer 6）浏览器因其市场份额占据主导地位，而其对PNG（Portable Network Graphics）图像格式的支持却存在局限性，尤其是对于PNG8和PNG24格式的透明处理。PNG格式是Web上常用...
C++ 访问DOM中文文档IHTML
04-04
C++ 是一种广泛使用的通用编程语言，它不仅性能高效而且灵活性强。通过 C++ 访问 DOM（Document Object Model）可以实现对 HTML 和 XML 文档的动态操作。本文将详细介绍 IHTMLSpanFlow 和 IHTMLStyle 接口，这两个...
jQuery animate属性backgroundPositionY
喜欢文学的程序员
09-04 962
诸如: $(selector).animate({"backgroundPositionY":  "100px"}, 100); $(selector).animate({"backgroundPositionY":  "20%"}, 100); 可以设置元素背景图的纵坐标.   如果元素背景图纵坐标已经有了初始值, 那么我想通过animate在初始值的基础上控制背景图的位置, 该怎么操...
background-position 用法详细介绍
热门推荐
JeamKing的专栏
05-22 12万+
语法：background-position : length || length background-position : position || position 取值：length  : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位  position  : top | center | bottom | left | center |
background-position属性
Emotionameng的博客
10-07 755
background-position属性 css 属性: background-position: x y; x、y值可以是left right top bottom center，可以是相对值%，可以是数字。  1、x作用于横轴，y是竖轴         2、当取英文关键字时，left 相当于 x:0%，center为50%具体看它放在x还是y处。 注：无论left在x或者
js取backgroundPositionX的值
weixin_30526593的博客
08-14 406
如果有内联样式通过elem.style.backgroundPosition可以取得backgroundPositionX和backgroundPositionY两个值，但是如果没有内联样式通过计算样式getComputedStyle(elem,null).backgroundPosition得到的总是返回IE下的backgroundPositionX的值，我还没有找到通过getComputed...
background-position相关问题
m0_60197943的博客
10-07 336
background-position：x y 其中x与y分为方位名词与精确单位两种 首先是方位名词，主要有top/bottom/left/right/center 小测试： 问题一：使用方位名词，背景图是怎么移动位置的？ background-position:top center与background-position：center top 因此，对于方位名词，center top === top center 其实是这样的，background-position有两个
background-position 详解
weixin_30354675的博客
01-19 376
一、语法 语法：background-position：x, y; 定义：背景图片相对容器原点的起始位置； 取值： 关键字：top | center | bottom | left | center | right 百分比：百分数 具体值：px、rem、em等确值 默认值为：0% 0%（即坐标原点） 二、定位原理 ...
JavaScript中的backgroundPosition的设置
cherry_vicent的专栏
03-11 1万+
在CSS中background-position有对值的设置有两种：一是用数值（绝对的），另一个使用百分比（相对的）。这两种方式会有不同的浏览器兼容问题（主要是IE和FF）。 基本代码如下 style="overflow-y:scroll;height:300px;" charset="UTF-8"> mag3 rel="stylesheet"
js实现图片上下滚动background-position
weixin_45638909的博客
10-05 2092
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <style> * { margin: 0; } .a{ backgrou
backgroundpositionx
05-31
`background-position-x` 是 CSS 属性之一，用于设置元素背景图片的水平位置。它的值可以是一个具体的像素值，也可以是一个百分比值，或者是 left、center、right 中的一个关键字。例如，设置 `background-position-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值