Question

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

我想要的是添加一种径向光影，而不是背景上的平面颜色。

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

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

Answer 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％），确切地说）;

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

生成动态径向背景

1 个答案: