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

Question

我想要實現的目標：使用相同的圖像，使用jQuery設置元素的background-position ，以便它們重疊最接近的父級background-image 。 我以某種方式認為，需要將$element.property().left乘以接近2 （仍然不十分了解為什么如此），但是我看不到其中的任何數學模式。

如果有人可以告訴我方程中到底包含什么，那將是很大的幫助。 我想象一個元素以及DOM樹中涉及的所有元素都有padding和margin ，但是經過大量組合，我仍然無法到達那里。

似乎獲得最佳效果的最佳方法只是設置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

因為/如果您使用完整的視口，則可以使用視口單位來定位和調整內部卡片的大小，並將腳本放在一起。

這在您調整大小時也會縮放，並且由於不需要腳本來監視調整大小和重新繪制，因此可以提高性能。

請注意，在此演示中，我不使用bootstrap運行它，因為我不想為其媒體查詢的等添加補償。

更新的小提琴

 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>