jquery - 是否可以让一个元素的不透明度通过其他元素传递到背景中？像一个窗口？

Question

我在想象在背景上的页面底部开始有一个固定位置的框。它们的不透明度设置为 0.8，它们将固定在页面底部，直到它们滚动到页面下方的白色背景上。即使他们正在通过这个新的白色背景，我仍然希望在他们滚动到白色时通过框看到原始背景。这有可能吗？

Answer 1

[对于非固定非缩放背景图片]

如果我没理解错的话，您要寻找的效果基本上是让框通过白框显示 View 并显示页面背景。虽然这实际上不能只用 css 完成，但可以用 javascript 模拟。

基本思想是将框的背景设置为与页面相同的背景，然后调整它们的背景位置以匹配它们在页面上的位置。

http://jsfiddle.net/o6z18o7e/1

$(function(){
    $(window).scroll(function(){
        $(".box").each(function(){
            var $this = $(this);
            var pos = $this.offset();
            
            $this.css("background-position", (pos.left * -1) + "px " + (pos.top * -1) + "px");
        });
    }).scroll();
});

body{
    background: url(http://placekitten.com/1000/3000);
    margin: 0;
    padding: 0;
}
.box{
    border: 3px solid gray;
    width: 100px;
    height: 100px;
    position: fixed;
    background: url(http://placekitten.com/1000/3000);
}
.content-box{
    margin-top: 300px;
    background-color: white;
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="box" style="top: 50px; left: 100px;"></div>
<div class="box" style="top: 175px; left: 150px;"></div>
<div class="box" style="top: 450px; left: 300px;"></div>
<div class="box" style="top: 50px; left: 600px;"></div>
<div class="box" style="top: 350px; left: 650px;"></div>

<div class="content-box"></div>
<div class="content-box"></div>
<div class="content-box"></div>
<div class="content-box"></div>
<div class="content-box"></div>
<div class="content-box"></div>