jQuery .css() 未获得背景位置 w/o！在 css 中很重要

Question

我希望有人能帮助我理解为什么 jQuery .css() (v1.11) 方法对于具有非覆盖背景位置的元素返回 0% 0%已定义（在检查器中运行和样式 sheet）。

我觉得有点困惑的是，为什么当我在规则上强制执行 !important 时它会被拾取...但只有到那时。

jQuery:

;(function WhosebugExample(){
  "use strict";
  $('div').each(function(){
    var origPos = $(this).css('backgroundPosition');
    alert('original position: '+origPos); // Why?! false return value 0% 0%
// unless an !important used in the stylerule...
  });
})();

CSS:

#test1, #test2 {
    padding: 65px;
    margin: 50px;
    color: #fff;
    font-size: 3rem;
    text-transform: uppercase;
    background-position: 500px 500px !important;
    box-shadow: inset 1px 10px 10pc #000;
  }
  #test1 {
    background: url(http://placehold.it/450x250);
    margin-bottom: 900px;
  }
  #test2 {
    background: url(http://lorempixel.com/b/1800/800/);
  }

最后，标记（玉）：

main 
    h1 This is a parallax scrolling demo
    div#test1 test1
    div#test2 test2

这是在加载时提醒背景坐标的演示，请注意这次缺少 !important。 jQuery 在这种情况下提醒 0% 0% 背景位置。嗯嗯..

http://codepen.io/nicholasabrams/pen/qEVbpd

下面的演示与上面的唯一区别是#test1 和#test2 的背景位置添加了一个!important 标志，这次你猜对了 jQuery预期的位置和 returns 值。

http://codepen.io/nicholasabrams/pen/ogoLyV

谢谢大家让我知道我是否可以详细说明！

Answer 1

因为您是在背景位置之后设置背景图像，但是您使用的是 shorthand "background" 设置所有背景属性，包括背景位置。

使用：

background-image: url(http://placehold.it/450x250);

相反。

jQuery .css() 未获得背景位置 w/o！在 css 中很重要

jQuery .css() not getting background position w/o !important in css

css

jquery

dom

csom