我正在尝试将 css 剪辑应用于元素以允许后面的图层显示出来。我有以下布局..
body, html {
margin:0;
padding:0;
}
.container {
background:lightgray;
}
.clip {
position:fixed;
height:100%;
width:100px;
clip: rect(10px, 100px, 100px, 100px);
}
.section1, .section2 {
height:100vh;
width:100%;
}
.section_left_red {
height:100%;
width:100px;
background:red;
}
.section_left_blue {
height:100%;
width:100px;
background:blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
<div class="section_left_red">
</div>
<div>
<div class="section2">
<div class="section_left_blue">
</div>
<div>
</div>
我正在努力实现这样的目标..
所以当我向下滚动时,蓝色背景就会显示出来。谁能告诉我我做错了什么?
最佳答案
您可以使用多个背景来创建它。这个想法是只对背景的一部分着色,使其余部分透明:
body,
html {
margin: 0;
padding: 0;
}
.clip {
position: fixed;
height: 100%;
width: 200px;
box-sizing:border-box;
border:5px solid lightgray;
background:
linear-gradient(lightgray,lightgray) right/50% 100%,
linear-gradient(lightgray,lightgray) bottom/100% 80%;
background-repeat:no-repeat;
}
.section1,
.section2 {
height: 100vh;
width: 100%;
background: red;
}
.section2 {
background: blue;
}
<div class="container">
<div class="clip">
</div>
<div class="section1">
</div>
<div class="section2">
</div>
</div>
关于html - CSS Clip - 允许背景显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52987172/