Question

我希望有人可以帮助我理解为什么jQuery .css（）（v1.11）方法为已定义未覆盖的背景位置的元素返回0％0％（在运行时和检查器中样式表）。

我发现有点令人费解的是，为什么当我对规则强制执行时，它会被拾取...但只有这样。

jQuery：

;(function stackoverflowExample(){
  "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

这是一个在负载时警告背景坐标的演示，请注意这次没有！重要。在这种情况下，jQuery会警告0％0％的背景位置。嗯..

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

现在下面演示中唯一的区别就是＃test1和＃test2上的背景位置添加了一个！important标志，你猜对了这次jQuery找到了预期的位置并返回价值。

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

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

Answer 1

因为你是在背景位置之后设置背景图像，但是你正在使用速记＆＃34;背景＆＃34;它设置所有背景属性，包括background-position。

使用：

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

代替。

jQuery .css（）没有获得背景位置w / o！在css中很重要

1 个答案: