仅使用 CSS 制作发光背景答案

【问题标题】：Making Glowing Background with CSS only仅使用 CSS 制作发光背景
【发布时间】：2015-11-02 08:14:50
【问题描述】：

我只想用 CSS 创建这个背景。

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

【问题讨论】：

我不相信只有 css 才能做到这一点。但是你可以试试 svg...
您可以为响应式修复设置不同大小的图像
渐变怎么样？
我很难理解答案是一行代码的问题如何被视为“过于宽泛”。缺乏有问题的代码并不是投票“过于宽泛”的理由。这个问题有一个固定的起点和终点。 OP 提供的任何代码都可能导致 XY 问题。

标签： html css radial-gradients

【解决方案1】：

您可以使用radial-gradient 来产生发光效果。您可以将颜色更改为与图像内联。

您应该注意的一点是浏览器对 CSS 渐变的支持。 IE

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>

我看不到任何额外的步骤，但如果您正在寻找不同百分比的几个步骤，请查看以下 sn-p：

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>

【讨论】：

优秀！！！渐变可让您在两种或多种指定颜色之间显示平滑过渡
其实是很好的解决方案，但颜色不能像我在 photoshop 上做的那样。
@Mosh：这只是一个关于如何实现发光效果的示例。正如我在答案中提到的，您可以根据需要修改颜色。第一种颜色应该是最里面的颜色，而第二种颜色应该是最外面的颜色。
谢谢@Harry，这个：body{ background-image:radial-gradient(circle, rgb(50, 142, 229) 0%, rgb(29, 84, 166) 100%);高度：100vh； } 解决了我的问题。
@Harry 完美的简单而简短的答案。看起来很流畅:)