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

Question

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

Answer 1

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

如果我没理解错的话，你要的效果基本上就是让方框透过白框显示一个视图，并显示页面的背景。虽然这实际上不能只用 css 来完成，但可以用 javascript.

来模拟

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

$(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>

Answer 2

我在这里添加一个单独的答案，因为我相信第一个可能对其他人有用，所以我不想删除它。但是，在评论中进一步细化了问题的要求。

[对于固定背景]

固定body背景的背景位置，其实就简单多了。您可以简单地添加一个与正文具有相同背景属性的内部 div。纯 css，不需要 js。它甚至可以使用 window 大小的背景缩放。

http://jsfiddle.net/6feraj7p/3/

body, .bg {
 background: url('http://www.junoon.co/sw-store/images/wallpapers/urdu.co-34163121.jpg') no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size:cover;
 -o-background-size:cover;
 background-size: cover;
    overflow-x: hidden;
}
.longBox {
 height: 100vh;
 margin-top: 100vh;
 background-color: #FFFFFF;
 text-align: center;
 background-size: 100%;
 margin-right: -3000px;
 padding-right: 3000px;
 margin-left:  -3000px;
 padding-left:  3000px;
}
#propertyButton {
 bottom: 10px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
 background-size: 100%;
 position: fixed;
}
.button{
    border: 3px solid gray;
    height: 35vh;
 width: 35vh;
    position: fixed;
    overflow: hidden;
}
.bg{
    height: 100%;
    width: 100%;
}

<div id = "propertyButton" class = "button"><div class="bg"></div></div>
<div class = "longBox"></div>

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

Is it possible to have an element's opacity carry through other elements to the background; like a window?

html

css

jquery

opacity