生成动态径向背景答案

【问题标题】：Generating a dynamic radial background生成动态径向背景
【发布时间】：2015-06-03 04:02:53
【问题描述】：

我正在尝试创建一个网站，并希望添加一个用户可以选择颜色的背景。

我想要的是添加一种径向光影，而不是在背景上使用纯色。

我发现这张图片符合我的想法，也许它可以帮助您了解我想要实现的目标：Red background with a slightly lowered centered radial shadow.

同时，我正在尝试在 SVG 中创建这种效果，因为我的想法是有一个背景颜色，比如说红色（就像图像一样），然后是 HTML 内容顶部的径向阴影.

【问题讨论】：

我想你会发现这个网站很有用：cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28248\%2C80\%2C50\ %2C1\%29\%200\%25\%2C\%20rgba\%28241\%2C111\%2C92\%2C1\%29\%2050\%25\%2C\%20rgba\%28246\%2C41 \%2C12\%2C1\%29\%2051\%25\%2C\%20rgba\%28240\%2C47\%2C23\%2C1\%29\%2071\%25\%2C\%20rgba\% 28231\%2C56\%2C39\%2C1\%29\%20100\%25\%29\%3B'
真的！我只是在调整它，我会发布一个答案，以后可能对某人有用。
我不完全确定您是否想在 SVG 中执行此操作....不过。它创建....不必要地加载到浏览器上。除非你打算用它做点什么。
我也认为你的意思是双色的？还是动态的？如果您想做类似的事情，该网站也是一个不错的起点，我建议预定义颜色
关于 SVG 格式，我认为它会更好，因为它是可扩展的并且不会有窗口大小的问题。在你建议的网站上，我记得径向渐变，所以 SVG 的使用不再是我的样子了。

标签： html css svg

【解决方案1】：

对于我正在寻找的效果，这非常接近答案（我没有调整背景的位置，因为我想稍微降低一点，但这并不重要）：

<!DOCTYPE html>
<html>
<style type="text/css">
    html {
        /* Background solid color */
        background: rgba(255, 127, 0, 1);

        /* Old Browsers */
        background-image: rgba(0, 0, 0, 0);

        /* FF3.6+ */
        background-image: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%);

        /* Chrome, Safari4+ */
        background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.20)));

        /* Chrome10+,Safari5.1+ */
        background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%);

        /* Opera 11.10+ */
        background-image: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%);

        /* IE 10+ */
        background-image: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%);

        /* W3C */
        background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%);

        /* Fixes to set the radial shadow fixed */
        background-repeat: no-repeat;
        background-attachment: fixed;

        /* Fix to set the radial shadow the height of the window */
        min-height: 100vh;
    }       
</style>

<body> </body>
</html>

编辑

我一直在和背景打交道，一开始就找到了我想要的答案：

background-image:
  radial-gradient(
    50vw 80vh at 50vw 80vh,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.25) 100%
  );

解释：

第一个50vw 80vh 设置径向渐变为窗口虚拟宽度的 50% 和虚拟高度的 80%；
第二个50vw 80vh 将径向渐变设置为从左侧算起虚拟宽度的 50%，从顶部算起虚拟高度的 80%；
第一个rgba(0, 0, 0, 0) 50%将径向渐变的颜色设置为渐变大小的0%到50%完全透明；
第二个rgba(0, 0, 0, 0.25) 100% 将径向渐变的颜色从 50%（因为最后一个色标在 50%）设置为渐变大小的 100%，黑色稍微透明（1/4，或 25%，到准确）；

希望我没有说错什么，希望这对某人有所帮助。

【讨论】：