`
李俊良
  • 浏览: 144788 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

backgroundPositionX和backgroundPositionY兼容性问题

阅读更多

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

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

 

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

因为IE也不支持backgroundPosition函数

 

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

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

如果不是就用backgroundPosition就行了

但是需要注意的是

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

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

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

2
1
分享到:
评论

相关推荐

    【JavaScript源代码】Vue3实现图片放大镜效果.docx

    backgroundPositionX: position.backgroundPositionX, backgroundPositionY: position.backgroundPositionY, }]" v-if="isShow" > class="middle" ref="target" > :src="imageList[curId]" alt="" />...

    页面样式调试必备-style属性

    - `backgroundPosition`: 定义背景图像的初始位置,可以通过`backgroundPositionX`和`backgroundPositionY`分别设置X轴和Y轴的位置。 - `backgroundRepeat`: 控制背景图像是否及如何重复。 **边框和边距属性**: - ...

    js键盘事件实现人物的行走

    本文将详细介绍如何通过JavaScript的键盘事件来控制网页上人物的移动和跳跃,具体实现2D效果。为此,我们将通过示例代码来展示整个过程。首先,我们需要建立一个HTML文档,并通过CSS来设定基本的样式。然后,通过...

    C++ 访问DOM中文文档IHTML

    C++ 是一种广泛使用的通用编程语言,它不仅性能高效而且灵活性强。通过 C++ 访问 DOM(Document Object Model)可以实现对 HTML 和 XML 文档的动态操作。本文将详细介绍 IHTMLSpanFlow 和 IHTMLStyle 接口,这两个...

    非常酷的jquery背景动画效果

    最后,为了确保兼容性和用户体验,我们需要考虑在不支持jQuery或JavaScript被禁用的环境中提供备选方案。这可能意味着为背景图片提供静态效果,或者使用纯CSS的动画,如CSS3的`@keyframes`规则。 总结起来,创建...

    js获取某元素的class里面的css属性值代码

    return obj.currentStyle.backgroundPositionX + " " + obj.currentStyle.backgroundPositionY; } } if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView....

    实现IE6下PNG背景透明的方法

    在早期的网页设计中,IE6(Internet Explorer 6)浏览器因其市场份额占据主导地位,而其对PNG(Portable Network Graphics)图像格式的支持却存在局限性,尤其是对于PNG8和PNG24格式的透明处理。PNG格式是Web上常用...

    web网页滑块验证代码

    此外,还可以通过改变图片或使用canvas来增加验证的复杂性,提高安全性。总的来说,这个项目提供了一个学习JavaScript、CSS和HTML交互的好机会,同时展示了如何在网页中实现基本的滑块验证功能。

Global site tag (gtag.js) - Google Analytics