gpt4 book ai didi

具有线性彩色径向线的 CSS 背景

转载 作者:行者123 更新时间:2023-12-01 23:16:36 28 4
gpt4 key购买 nike

一位设计师想出了这种类型的背景,如下图所示。我想避免使用图像背景。因此,如果可以使用 CSS background 属性复制它,我会努力思考。

最底层只是一个线性渐变,没有问题。但是在其之上分层的圆形并不那么容易(如果可能的话)。

我的第一个想法是为圆形使用各种径向渐变,但如您所见,这些形状具有线性填充并且需要透明背景,以便圆形淡出。我不知道如何实现这一点,但我不是 CSS 专家,所以我想听听一些关于这个的意见。

enter image description here

最佳答案

mask 可以帮助你估计这个

.box {
height:500px;
background:linear-gradient(135deg,#001f8e,#00fdcf);
position:relative;
}
.box:before {
content:"";
position:absolute;
inset:0;
background:linear-gradient(#00fdcf,#001f8e);
-webkit-mask:radial-gradient(circle 120px,#000 75%,#0000);
}
<div class="box"></div>

或带有模糊滤镜的基本圆形元素:

.box {
height:500px;
background:linear-gradient(135deg,#001f8e,#00fdcf);
position:relative;
}
.box:before {
content:"";
position:absolute;
inset:calc(50% - 100px) calc(50% - 100px);
background:linear-gradient(#00fdcf,#001f8e);
border-radius:50%;
filter:blur(10px);
}
<div class="box"></div>

关于具有线性彩色径向线的 CSS 背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68733253/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com