2

下の画像に示すように、デザイナーはこのタイプの背景を考え出しました。画像背景の使用は避けたいと思います。そのため、CSS の背景属性を使用してこれを再現できるかどうか、頭を悩ませようとしています。

最下層は単なる線形グラデーションで、問題はありません。しかし、その上に重ねられた円形はそれほど簡単ではありません (できれば)。

私が最初に考えたのは、円形の形状にさまざまな放射状グラデーションを使用することでしたが、ご覧のとおり、これらの形状には線形の塗りつぶしがあり、円がフェードアウトするように透明な背景が必要です。これを達成する方法はわかりませんが、私は CSS の専門家ではないので、これについて意見を聞きたいです。

ここに画像の説明を入力

4

1 に答える 1

5

マスクはこれを近似するのに役立ちます

.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>

于 2021-08-10T21:07:51.133 に答える