要素の位置に基づいて正確な背景位置を設定する方法は？

Question

私が達成しようとしているのは、同じ画像を使用して、background-positionをjQueryと設定して、最も近い親と重複するようにbackground-imageです。私は何とかして、$element.property().leftは2に近い何かを乗算する必要があると思っています（なぜそれが本当に理解できないのかまだ分かりませんが）。

誰かが私に方程式を正確に伝えることができたら、それは大きな助けになるでしょう。私は、paddingとmarginの要素と、関連するDOMツリー上のすべての要素があると思いますが、多くの組み合わせの後にはまだそこに到達できません。

希望の効果を得るには、background: transparent;を設定するのが最善の方法だと思われるかもしれませんが、はそうではありません。;要素の背景画像にCSSプロパティのfilterプロパティをさらに使用するために必要です。

テスト用に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せずにこれを実行しました

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>