如何在CSS中实现这种背景照明效果？

qgelzfjb 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(107)

我想知道这里是否有人知道如何创建这些“背景照明”效果？就像www.example上的这个 www.example.com

以下是我的尝试：

.wrap {
  height: 80vh;
  width: 100%;
  background-color: black;
  opacity: .9;
}
.lighting {
  margin-left: 500px;
  height: 20vh;
  aspect-ratio: 1;
  filter: blur(15px);
  background-color: purple;
}

<div class="wrap">
  <div class="lighting"></div>
</div>

css

来源：https://stackoverflow.com/questions/71574522/how-to-make-this-background-lighting-effect-in-css

2条答案

按热度按时间

wfypjpf41#

您可以生成一个similar effect with this tool，然后在代码中使用SVG：

只需设置形状的位置、大小和颜色，然后下载生成的SVG。非常有用！

赞(0）回复(0）举报 2023-05-02

lh80um4z2#

网站使用的确切样式是两种background-image样式的混合。第一个是梯度，第二个是棋盘格图案：

.index_beams__3fKa4 {
    background-image: url(/_next/static/media/hero@75.4dea7abe609fc522c039fba7662ceea2.jpg);
    background-size: 150rem;
}

.bg-grid-slate-900\/\[0\.04\] {
     background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.04)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e);
}

赞(0）回复(0）举报 2023-05-02

我来回答

如何在CSS中实现这种背景照明效果？

2条答案

相关问题

热门标签

最新问答