Question

这些天我一直在尝试一些CSS技巧，但遇到了问题。例如：

<div class="parent" style="background-image: url("../x.jpg")">
  <div class="child">
  </div>
  <div class="sec-child">
  </div>
</div>

我试图使.parent的背景仅显示在子元素的内容框中，但失败了。我知道有很多方法可以将.child和.sec-child裁剪到.parent；但是是否可以将.parent剪辑到.child和sec-child？

Answer 1

你是对的。可以用一个小jQuery来完成：

$(".parent div").css("background-image",$(".parent").css("background-image"));
$(".parent").css("background-image","none")

$(".parent div").each(function(){

    var relativeY = $(this).parent().offset().top - $(this).offset().top;
    var relativeX = $(this).parent().offset().left - $(this).offset().left;
    console.log (relativeX+" "+relativeY)

    $(this).css("background-position",relativeX+"px "+relativeY+"px")

})

https://jsfiddle.net/hpvl/4r3056zv/21/

用子元素剪辑父元素

1 个答案: