在CSS中创建透明蒙版叠加层

Question

所以我正在制作这个游戏，角色在一个黑暗的洞穴里用火炬移动。我希望火炬点亮角色周围的区域，以便玩家可以看到角色。我能用图像做到这一点，但图像必须至少为2000 x 2000px才能覆盖角色周围的足够区域。因为图像是2000 x 2000我的FPS从50降到30.无论如何要在CSS中这样做？请注意，黑色区域下方的可见区域不是图像，而是具有背景的div。顺便说一下，如果你想知道我正在制作HTML / javascript游戏。

Answer 1

您可以使用box-shadow属性在CSS对象周围生成阴影。要拥有“负面”阴影，您可以使用应用于整个屏幕的“插入”属性：

index index.php index.html index.htm;
# htaccess configuration
autoindex off;
if(!-e $request_filename){
rewrite^(.+)$ /index.php?url=$1 break;
}
location ~ \.php$ {
    try_files $uri =404;
    fastcgi_intercept_errors on;
    fastcgi_index  index.php;
    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
    fastcgi_pass   php-fpm;
}

第一个和第二个px属性允许它在中心周围移动负阴影。 然后你有模糊半径，扩散半径和RGB颜色（不透明度）

您可以使用这些设置来查看结果，例如在this工具中。 （不要忘记最后的插入切换）。

Answer 2

为什么不只是position: fixed图像，而不需要移动它？