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

Qt QSS 中 background-image、image 和 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);
}
相关推荐
DIY机器人工房3 小时前
问题解决方法:qt的设计师页面怎么开启scroll area组件的滚轮功能
qt·嵌入式·diy机器人工房
学生董格3 小时前
[嵌入式embed][Qt]Qt5.12+Opencv4.x+Cmake4.x_测试Qt编译的opencv4.x的库
开发语言·qt
辗转反侧着疑惑3 小时前
MyBatis Plus 【详解】| 学习日志 | 第 17 天
java·开发语言·学习·mybatis·mybatis-plus
Joy-鬼魅3 小时前
使用 qmake 生成 Makefile,Makefile 转换为 Qt 的 .pro 文件
qt·makefile
Joy-鬼魅3 小时前
在 Qt 的 .pro 文件中设置警告级别和 C++11 标准
开发语言·c++·qt
脑子慢且灵3 小时前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom
Hard but lovely4 小时前
编译后视角的运算(关于中,后缀(逆波兰)表达式的计算)
开发语言·c++·算法
Tipriest_4 小时前
C++ numeric库简介与使用指南
开发语言·c++·numeric
励志不掉头发的内向程序员5 小时前
从零开始的python学习——函数(2)
开发语言·python·学习