Question

我有一个主容器，名为#outside的内容包装器。此div具有背景图像，全宽和高度。我们称之为background image with blur effect。

在#outside div中，我有#inside div，再次是全宽和高度。这个div也有背景图片。我们简单地称之为overlay background。

在#inside div中，我有小内容框.box。这是一个有效的例子：

我想知道的是，如果.box框的位置有overlay background剪裁的方式，那么background image with blur effect将可见？但只能在.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"
});

Answer 1

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

$(".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"
    });
});

http://jsfiddle.net/blaird/gUc7E/2/

夹子背景图象的零件/箱子

1 个答案: