Qt QSS的几种图片显示方式

大家在使用QSS进行图片设置时，一定被image, border-image, background-image这几个属性困扰过。比如他们之间有什么区别，什么时候该用哪个属性来设置等等。本文就来讲解一下这个几个属性的异同点。

在讲解之前需要大家对Qt的盒子模型有所了解，建议大家先阅读一下《Qt QSS使用》文章中关于盒子模型的部分。

一、background-image

background-image按图片实际尺寸显示图片，超过控件显示区域的部分会被裁剪掉，虽能显示SVG，但无法对SVG进行无损缩放；

关于background-image的几个附属属性的作用，可以一句话概括为：
从background-origin区域的background-position位置开始绘制图像，并以background-repeat方式进行重复；最后将图像background-clip区域以外的范围裁剪掉（即不显示）。

二、image

按图片原长宽比来缩放图片，保证填充满控件content区域，支持SVG矢量图显示和无损缩放;
image可以使用image-position来指定图片开始显示的位置（参考上面background-position）。

三、border-image

按控件border区域的长宽比来缩放图片，保证填充满控件border区域，支持SVG矢量图显示和无损缩放;

四、绘制顺序

如果在一个控件中同时指定background-image，border-image，image这三个属性，会按照如下的顺序进行绘制：

先绘制 background-image
然后 border-image
最后 image

五、示例

QPushButton#pushButton4 {
	border: 20px solid rgba(0,0,255,0.5);
	padding: 20px;
	margin: 20px;
	background-image: url(:/QssUsage/Image/头像.png); /*下图中的圆形头像*/
	background-origin: margin;
	background-position:top left;
	background-repeat:repeat-x;
	background-clip: margin;
}

欢迎访问我的个人站点: https://jiangxueqiao.com