Question

我想象着在背景页面底部开始有一个固定位置的盒子。它们的不透明度设置为.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

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

[对于固定背景]

随着身体背景的背景位置固定，它实际上要简单得多。您只需添加一个与主体具有相同背景属性的内部div。纯css，不需要js。它甚至适用于窗口大小的背景缩放。

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

是否有可能让元素的不透明性通过其他元素传递到背景中;像一个窗户？

2 个答案: