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

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>