我想知道是否可以仅使用一个 div 创建如下图所示的背景效果。
我知道如何用两个 div 来实现它,但如果可以在一个 div 中完成(也许使用 :after ???),我的情况会变得非常容易。渐变的代码是:
.bg-green {
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
.bg-red {
background-image: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%;
}
谢谢:)
最佳答案
是的,使用带有 :pseudo-element 的单个 div
是可能的。
您可以做的是将第二个 线性渐变
添加到其 :after
:pseudo-element 中。请注意使用 rgba(r, b, g, a)
而不是十六进制颜色。这样您就可以通过更改其 alpha 值来控制第二个线性渐变的不透明度。
body, html {
height: 100%;
margin: 0;
}
div {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(110deg, #5EDC29 45%, #FF0058 45%, #FF0058 100%);
z-index: -1;
}
div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
<div></div>
如果您想要与问题中发布的渐变颜色完全相同的颜色,则需要 clipPath
。
body {
background: #222222;
margin: 0;
}
.bg {
width: 500px;
height: 300px;
background: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%);
}
.bg-2 {
position: absolute;
width: 500px;
height: 300px;
top: 0;
z-index: -1;
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
<svg width="500" height="300">
<defs>
<clipPath id="shape">
<path d="M300,0 L501,0 L501,301 L175,301z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="500" height="300">
<div class="bg"></div>
</foreignObject>
</svg>
<div class="bg-2"></div>
关于html - 两个渐变,两个不同的部分,只有一个 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27714340/