gtk.css - 如何添加模糊背景效果？

Question 1

我最近也在想这个问题，据我所知，我不相信 gtkcss 目前支持过滤器。

我想到的方法是通过 glsl 着色器为杂乱（mutter）actor 添加着色器效果。

我设法让它工作起来，产生了很好的模糊效果，我使用的示例是一个名为 GNOME 扩展布莱尔。

我的项目的 glsl 文件和代码可以在这里找到这里，以供参考。

你可以在代码中调用 glsl 并将其应用到演员身上，例如

    var shaderEffectVer = new Clutter.ShaderEffect(Clutter.ShaderType.FRAGMENT_SHADER);
    var wallpaper_actor = new GtkClutter.Actor ();

    shaderEffectVer.set_shader_source("shader.glsl"));
    shaderEffectVer.set_uniform_value("dir", 1.0);
    shaderEffectVer.set_uniform_value("width", g_width);
    shaderEffectVer.set_uniform_value("height", g_height);
    shaderEffectVer.set_uniform_value("radius", 10.0);
    shaderEffectVer.set_uniform_value("brightness", 0.98);
    wallpaper_actor.add_effect_with_name("blur",shaderEffectVer);

希望对您有帮助

Answer

我最近也在想这个问题，据我所知，我不相信 gtkcss 目前支持过滤器。

我想到的方法是通过 glsl 着色器为杂乱（mutter）actor 添加着色器效果。

我设法让它工作起来，产生了很好的模糊效果，我使用的示例是一个名为 GNOME 扩展布莱尔。

我的项目的 glsl 文件和代码可以在这里找到这里，以供参考。

你可以在代码中调用 glsl 并将其应用到演员身上，例如

    var shaderEffectVer = new Clutter.ShaderEffect(Clutter.ShaderType.FRAGMENT_SHADER);
    var wallpaper_actor = new GtkClutter.Actor ();

    shaderEffectVer.set_shader_source("shader.glsl"));
    shaderEffectVer.set_uniform_value("dir", 1.0);
    shaderEffectVer.set_uniform_value("width", g_width);
    shaderEffectVer.set_uniform_value("height", g_height);
    shaderEffectVer.set_uniform_value("radius", 10.0);
    shaderEffectVer.set_uniform_value("brightness", 0.98);
    wallpaper_actor.add_effect_with_name("blur",shaderEffectVer);

希望对您有帮助

Question 2

我知道这已经很老套了——但我觉得我至少应该简短地回答一下。

至于想要 CSS 子集能够使用“background-filter”：

浏览器能做什么和操作系统能做什么是完全不同的事情。有些操作系统支持原生的模糊功能，有些则不支持。非 Web 提供的 CSS（如 pango 和 gtk 等）通常是子集CSS。这发生了很大变化，因此可能已经不再是这种情况了。

基本上，如果您想要模糊背景，您将需要一个合成器来实现，但可能需要进行一些设置。我认为 Compton 有这个功能，但正如我所说，这需要一些设置，并且不是您可以随便塞进主题的东西。

你也可以看看 Compiz/Fusion（他们现在也是其中之一），它非常酷，而且我记得你可以在那里做一些花哨的事情，比如模糊等等。另外，上次我尝试的时候它比 KWin 更快更小，所以就是这样。不过，如果你必须追求绝对的效率，那么你应该坚持使用 Compton。

如果你只是想模糊终端

如今，市场上有一大堆黑客工具可以实现这一点。较新的管理器现在已内置此功能，因此无需费力。Windows 用户可能需要等待更长时间。Mac 和 Linux 用户现在已经拥有此功能。

Answer