仅使用 CSS 制作发光背景

Question

我只想在 CSS 中创建此背景。

我想用 CSS 来避免响应问题。

Answer 1

可以利用radial-gradient来制作发光效果。您可以将颜色更改为与图像一致。

您应该注意的一件事是浏览器对 CSS 渐变的支持。 IE < 10 不支持它们。如果您需要对旧浏览器的支持，那么 CSS 渐变将无济于事。

body {
  background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(29, 84, 166) 100%);
  height: 100vh;
}

<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

我看不到中间有任何额外的步骤，但如果您正在寻找不同百分比的几个步骤，请查看以下代码段：

body {
  background-image: radial-gradient(circle, rgb(49, 144, 228) 0%, rgb(41, 122, 204) 30%, rgb(29, 84, 166) 70%);
  height: 100vh;
}

<!-- prefix free library included only to avoid vendor prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

仅使用 CSS 制作发光背景

Making Glowing Background with CSS only

html

css

radial-gradients