如何根據元素的位置設置精確的背景位置？

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>

Answer 2

由於/如果使用完整的視口，您可以使用視口單位來定位和s請將內部的卡的腳本放在一起。

當您調整大小時，這也會縮放，並且會提高性能，因爲您不需要腳本來監視大小調整和重繪。

注意，這個演示中，我跑這不bootstrap，因爲我不想增加賠償其媒體查詢的等

Updated fiddle

html, body { 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 
.outer { 
 
    height: 1080px; 
 
    width: 100vw; 
 
} 
 
.card-acrylic { 
 
    top: 20px; 
 
    width: 80vw; 
 
    margin-left: 10vw; 
 
    min-height: 500px; 
 
    position: relative; 
 
    background-position: left -10vw top -20px; 
 
} 
 
.card-acrylic + .card-acrylic { 
 
    top: 40px; 
 
    background-position: left -10vw top -540px; 
 
} 
 

 
.card-acrylic > * { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
.card-acrylic .acrylic-effect { 
 
    z-index: 99; 
 
} 
 

 
.card-acrylic .card-content { 
 
    background: rgba(34, 34, 34, 0.35); 
 
    z-index: 100; 
 
}

<div class="outer" style="background-image: url(http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg)"> 
 

 
    <div class="card-acrylic" style="background-image: url(http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg)"> 
 
    <div class="acrylic-effect"></div> 
 
    <div class="card-content"></div> 
 
    </div> 
 

 
    <div class="card-acrylic" style="background-image: url(http://www.planwallpaper.com/static/images/colorful-wallpaper2.jpg)"> 
 
    <div class="acrylic-effect"></div> 
 
    <div class="card-content"></div> 
 
    </div> 
 
</div>