Javascript 剪辑背景图像的部分/框

我有一个主容器，内容包装器，名为

#outside

。此div具有背景图像、全宽和全高。我们称之为具有模糊效果的背景图像

在

#外部

分区内，我有

#内部

分区，同样是全宽和全高。这个div还有一个背景图像。让我们简单地称之为“叠加背景”

在

#内

分区中，我有一些小的内容框，

.box

。以下是一个工作示例：

我想知道的是，是否有一种方法可以在

.box

框的位置上剪裁

叠加背景

，从而可以看到具有模糊效果的

背景图像

？但仅在

.box

框内。

.box

框的坐标在每页上可能不同，因此它们没有静态坐标。如果可能的话，那是哪条路

我已经玩过JavaScript，即使我知道它完全是一团糟，我也会把它复制到这里

var topleft;

$(".box").hover(function() {
    var offset = $(this).offset();
    var top = offset.top;
    var left = offset.left;
    console.log(top);
    console.log(left);
    var t = $('#inside').css({
        'clip':'rect(5px 40px 45px 5px)'
    });
    console.log(t);
}, function() {
    $(this).css({'opacity':'1'});
    $(topleft).css({'opacity':'1'});
});

var offset = $('.box').offset();
var top = offset.top;
var left = offset.left;
console.log(top);
console.log(left);

var img = { x1: '100%', x2: 717, y1: 216, y2: 436, url: "images/bg-blur.jpg" };

$(".box").css({
  width: 200,
  height: 200,
  background: "url('" + img.url + "')",
  backgroundPosition: "-"+left + "px " + "-"+top + "px"
});

这并不完美（我已经硬编码了要删除的页边距，并且必须删除您内部项目的页边距）。但是，它应该让你开始

$(".box").each(function() {
    var offset = $(this).position();
    var top = offset.top +143;
    var left = offset.left + 133;   
    $(this).css({
      background: "url('http://s24.postimg.org/bjouleih1/bg_blur.jpg')",
      backgroundPosition: "-" +left + "px -" + top + "px"
    });
});

这并不完美（我已经硬编码了要删除的页边距，不得不删除您的内部项目的页边距）。但是，它应该让你开始

$(".box").each(function() {
    var offset = $(this).position();
    var top = offset.top +143;
    var left = offset.left + 133;   
    $(this).css({
      background: "url('http://s24.postimg.org/bjouleih1/bg_blur.jpg')",
      backgroundPosition: "-" +left + "px -" + top + "px"
    });
});

---

非常感谢！我一直在寻找一种“剪辑/裁剪”的方法，但这对我来说也是一个很好的起点，我感谢你的努力。请注意，在全屏背景上

var offset=$（this.offset（）

也可以是一个选项，并且可以摆脱

+143

计算。我认为这是一个很好的解决方案。非常感谢！我一直在寻找一种“剪辑/裁剪”的方法，但这对我来说也是一个很好的起点，我感谢你的努力。请注意，在全屏背景上

var offset=$（this.offset（）

也可以是一个选项，并且可以摆脱

+143

计算。我认为这是一个很好的解决办法。