CSS : 关于上述元素的背景剪辑?
CSS : background-clipping regarding to above elements?
我的 HTML 页面上有这样的布局:
page layout
这是一个带有复选框(隐藏)的表单,标签的样式看起来像按钮(白色边框和透明背景以显示下面的渐变)。渐变部分是容器。
现在我想要实现的是仅在按钮下方显示渐变背景,以便按钮之间的部分保持白色。
查看示例:example(崇拜我的 Photoshop 技能)
我试图找出解决方案,但最终一无所获。如果你们中的一些人可以帮助我,我将不胜感激:)
提前致谢!
- 创建多个没有
background
和大 box-shadow
值的小圆框。
- 这些盒子上的多余阴影将被
overflow: hidden
在它们各自的父盒子上剪掉。
- 在最外层父项上应用渐变背景。
这是一个工作演示:
*,
*:before,
*:after {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow) no-repeat;
margin: 0;
}
.list {
justify-content: center;
list-style: none;
flex-wrap: wrap;
display: flex;
padding: 0;
margin: 0;
}
.list li {
justify-content: center;
padding: 30px;
overflow: hidden;
display: flex;
flex-grow: 1;
flex-basis: 50%;
}
.list .box {
box-shadow: 0 0 0 1000px #fff;
justify-content: center;
align-items: center;
border-radius: 100%;
display: flex;
height: 120px;
width: 120px;
}
<ul class="list">
<li>
<div class="box">Immobilier</div>
</li>
<li>
<div class="box">Travaux</div>
</li>
<li>
<div class="box">Finance</div>
</li>
<li>
<div class="box">Evenementiel</div>
</li>
<li>
<div class="box">Juridique</div>
</li>
<li>
<div class="box">Communication</div>
</li>
<li>
<div class="box">Recrutement</div>
</li>
</ul>
我的 HTML 页面上有这样的布局: page layout
这是一个带有复选框(隐藏)的表单,标签的样式看起来像按钮(白色边框和透明背景以显示下面的渐变)。渐变部分是容器。
现在我想要实现的是仅在按钮下方显示渐变背景,以便按钮之间的部分保持白色。
查看示例:example(崇拜我的 Photoshop 技能)
我试图找出解决方案,但最终一无所获。如果你们中的一些人可以帮助我,我将不胜感激:)
提前致谢!
- 创建多个没有
background
和大box-shadow
值的小圆框。 - 这些盒子上的多余阴影将被
overflow: hidden
在它们各自的父盒子上剪掉。 - 在最外层父项上应用渐变背景。
这是一个工作演示:
*,
*:before,
*:after {box-sizing: border-box;}
body {
background: linear-gradient(orange, yellow) no-repeat;
margin: 0;
}
.list {
justify-content: center;
list-style: none;
flex-wrap: wrap;
display: flex;
padding: 0;
margin: 0;
}
.list li {
justify-content: center;
padding: 30px;
overflow: hidden;
display: flex;
flex-grow: 1;
flex-basis: 50%;
}
.list .box {
box-shadow: 0 0 0 1000px #fff;
justify-content: center;
align-items: center;
border-radius: 100%;
display: flex;
height: 120px;
width: 120px;
}
<ul class="list">
<li>
<div class="box">Immobilier</div>
</li>
<li>
<div class="box">Travaux</div>
</li>
<li>
<div class="box">Finance</div>
</li>
<li>
<div class="box">Evenementiel</div>
</li>
<li>
<div class="box">Juridique</div>
</li>
<li>
<div class="box">Communication</div>
</li>
<li>
<div class="box">Recrutement</div>
</li>
</ul>