Gtk3：如何通过CSS显示动态GIF？

首先明确：Gtk3本身不支持直接通过CSS的background-image属性播放动态GIF——CSS背景渲染机制只会解码GIF的第一帧，不会处理动画帧的播放逻辑，所以你看到静态图是正常的。

不过可以通过「CSS自定义属性+代码读取加载」的方式，实现类似“用CSS指定动画文件”的需求，不用在源码里硬编码文件名，下面分组件给出具体方案：

1. 给Gtk.Image设置动态GIF（CSS指定路径） #

你可以在CSS里定义自定义属性存储GIF路径，然后在代码里读取这个属性值，再加载GdkPixbufAnimation到Gtk.Image，这样文件名完全由CSS控制：

CSS代码 #

/* 给目标GtkImage设置自定义属性和样式 */
GtkImage#animated-bg {
  --gif-path: "/home/user/assets/loading.gif";
  /* 可选：设置图片缩放模式 */
  -gtk-icon-size: 200px;
}

示例代码（C语言） #

// 创建GtkImage并指定对应名称
GtkWidget *gif_image = gtk_image_new();
gtk_widget_set_name(gif_image, "animated-bg");

// 读取CSS中定义的自定义属性
GValue path_val = G_VALUE_INIT;
gtk_widget_style_get_property(gif_image, "--gif-path", &path_val);
const gchar *gif_path = g_value_get_string(&path_val);

// 加载动态GIF并设置到GtkImage
GdkPixbufAnimation *animation = gdk_pixbuf_animation_new_from_file(gif_path, NULL);
gtk_image_set_from_animation(GTK_IMAGE(gif_image), animation);

// 释放资源
g_object_unref(animation);
g_value_unset(&path_val);

2. 给Gtk.Label设置动态背景 #

Gtk.Label本身不能直接通过CSS实现动态背景，你可以用Gtk.Overlay布局，把加载了动态GIF的Gtk.Image作为底层背景，Label放在上层：

核心思路代码 #

// 创建Overlay容器
GtkWidget *overlay = gtk_overlay_new();

// 创建动态背景图（用上面的方法加载GIF）
GtkWidget *bg_image = gtk_image_new();
gtk_widget_set_name(bg_image, "label-bg-gif");
// 读取CSS属性、加载动画的代码和上面一致...
// 设置背景图填充整个Overlay
gtk_widget_set_halign(bg_image, GTK_ALIGN_FILL);
gtk_widget_set_valign(bg_image, GTK_ALIGN_FILL);

// 创建Label
GtkWidget *label = gtk_label_new("我有动态背景");
// 给Label设置透明背景，避免遮挡GIF
gtk_widget_override_background_color(label, GTK_STATE_FLAG_NORMAL, NULL);

// 组装布局
gtk_container_add(GTK_CONTAINER(overlay), bg_image);
gtk_overlay_add_overlay(GTK_OVERLAY(overlay), label);

对应的CSS可以给GtkImage#label-bg-gif定义--gif-path属性，完全和Gtk.Image的用法一致。

为什么CSS background-image不行？ #

Gtk3的CSS渲染引擎处理background-image时，会将所有图片资源转换为静态GdkPixbuf对象，只会提取GIF的第一帧，不会触发GdkPixbufAnimation的帧更新逻辑，所以无论怎么设置CSS，都只能显示静态图，这是底层渲染机制的限制，没有直接的CSS属性可以突破。

内容的提问来源于stack exchange，提问作者Honza Vojtěch