【QT】Qt QSS 中 background-image、image 和 border-image 的区别

Qt QSS 中 background-image、image 和 border-image 的区别

[1. background-image](#1. background-image)
- 示例：
[2. image](#2. image)
- 示例：
[3. border-image](#3. border-image)

在 Qt 的 QSS（Qt Style Sheets）样式表中，background-image、image 和 border-image 是三种不同的方式用于添加图片资源，它们有着不同的用途和行为。

1. background-image

background-image 用于设置元素的背景图片。

特性：

图片会平铺（默认）或拉伸以填充元素的整个背景区域
可以使用 background-repeat 控制图片重复方式
可以使用 background-position 控制图片位置
可以使用 background-origin 指定背景绘制区域（content、padding 或 border）
可以使用 background-clip 指定背景剪裁区域

示例：

css 复制代码

QPushButton {
    background-image: url(:/images/background.png);
    background-repeat: no-repeat;
    background-position: center;
}

2. image

image 用于设置元素的内容图片（前景图片）。

特性：

图片作为元素的内容显示，而不是背景
通常用于显示图标或装饰性图片
图片会保持原始尺寸，不会自动拉伸填充
对于某些控件（如 QLabel），这是显示图片的主要方式

示例：

css 复制代码

QLabel#iconLabel {
    image: url(:/images/icon.png);
}

3. border-image

border-image 用于创建可伸缩的边框和背景。

特性：

使用九宫格（9-patch）技术，将图片分成 9 个区域
四个角保持不变，四条边和中心区域根据需要拉伸
非常适合创建可伸缩的按钮、面板等UI元素
需要指定边框宽度（border-width）来确定如何分割图片

语法：

css 复制代码

border-image: url(:/image.png) top right bottom left stretch|repeat;

示例：

css 复制代码

QPushButton {
    border-width: 5px;
    border-image: url(:/images/button.png) 5 5 5 5 stretch stretch;
}

这里数字 5 表示从图片边缘向内 5 像素作为边框区域。

对比总结

使用:

1.选择正确的属性：

需要背景纹理或渐变效果 :使用 background-image
需要显示图标或内容图片 :使用 image
需要创建可伸缩的UI元素 :使用 border-image

2.性能考虑：

border-image 通常需要更多计算资源，但可以提供更好的视觉效果
简单的背景使用 background-image 更高效

3.资源管理：

确保图片资源已正确添加到 Qt 资源系统（.qrc 文件）
使用正确的资源路径格式（:/path/to/image.png）

4.组合使用：

可以组合使用这些属性来创建复杂的视觉效果：

css 复制代码

QPushButton {
    border-image: url(:/images/button_border.png) 5 5 5 5 stretch stretch;
    background-image: url(:/images/button_bg.png);
    image: url(:/images/button_icon.png);
}