javascript - 如何根据元素的位置设置准确的背景位置？

Question

我想要实现的目标:使用相同的图像，使用 jQuery 设置一个元素 background-position，以便它们与最接近的父 background-image 重叠。我以某种方式认为，$element.property().left 需要乘以接近 2 的值(仍然不太明白为什么会这样)，但我看不到其中的任何数学模式。

如果有人能告诉我方程式的确切含义，那将是很大的帮助。我想有一个元素的 padding 和 margin 以及 DOM 树上的所有元素都涉及，但是经过很多组合我仍然无法到达那里。

似乎获得预期效果的最佳方式就是设置background: transparent;，但事实并非如此；我需要它来进一步使用元素背景图像上的 filter CSS 属性。

HTML中添加了内联样式用于测试；另外，我创建了 jsfiddle .

$.fn.filteredImg= function() {
    
    var $this = $(this)

    $this.each(function(index, card) {
        var $card   = $(card);
        var img     = $card.data("img");
        var $parent = $card.parentsUntil("[data-img='" + img + "']").last().parent();
        var $effect = $card.children(".filtered-effect");
        var pos     = $card.position();
        $parent.css({ 
            backgroundImage: "url(" + img + ")",
            backgroundRepeat: "no-repeat"
        });
        $effect.css({
            backgroundImage: "url(" + img + ")",
            backgroundPosition: -2 * Math.ceil(pos.left) + "px " + -Math.round(pos.top) + "px"
        });
    })
    

}   

$(".card-filtered-img").filteredImg();

.card-filtered-img {
  width: 80%;
  min-height: 500px;
  margin-left: 77px;
  margin-top: 17px;
  position: relative; 
}
  .card-filtered-img > * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
  }
  .card-filtered-img .filtered-effect {
    z-index: 99; 
  }
  .card-filtered-img .card-content {
    background: rgba(34, 34, 34, 0.35);
    z-index: 100; 
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-img="http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg">
<div class="container" style="margin-top:30px">
      <div class="row" style="padding:30px">
          <div class="col">
              <div class="card-filtered-img" data-img="http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg">
                  <div class="filtered-effect"></div>
                  <div class="card-content"></div>
              </div>

              <div class="card-filtered-img" data-img="http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg">
                  <div class="filtered-effect"></div>
                  <div class="card-content"></div>
              </div>
          </div>
      </div>
  </div>

Answer 1

这是基于 offset 而不是 position 的解决方案(我简化了代码):

$.fn.filteredImg= function() {
    
    var $this = $(this);

    $this.each(function(index, card) {
        var $card   = $(card);
        var $effect = $card.children(".filtered-effect");
        var $parent = $(card).parents(".parent").first();
        var img     = $parent.data("img");
        var cardPos = $card.offset();
        $parent.css({ 
            backgroundImage: "url(" + img + ")",
            backgroundRepeat: "no-repeat"
        });
        $effect.css({
            backgroundImage: "url(" + img + ")",
            backgroundPosition: -cardPos.left + "px " + -cardPos.top + "px"
        });
    })
    

}   

$(".card-filtered-img").filteredImg();

.card-filtered-img {
  width: 80%;
  min-height: 500px;
  margin-left: 77px;
  margin-top: 17px;
  position: relative; 
}
  .card-filtered-img > * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; 
  }
  .card-filtered-img .filtered-effect {
    z-index: 99; 
  }
  .card-filtered-img .card-content {
    background: rgba(34, 34, 34, 0.35);
    z-index: 100; 
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" data-img="http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg">
  <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card-filtered-img">
              <div class="filtered-effect"></div>
              <div class="card-content"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card-filtered-img">
              <div class="filtered-effect"></div>
              <div class="card-content"></div>
            </div>
        </div>
    </div>
</div>