Qt-使用border image填满背景

什么是border image?

A border image is an image that is composed of nine parts (top left, top center, top right, center left, center, center right, bottom left, bottom center, and bottom right). When a border of a certain size is required, the corner parts are used as is, and the top, right, bottom, and left parts are stretched or repeated to produce a border with the desired size.

See the CSS3 Draft Specification for details.

所谓border image是这样一种图片，它由九宫格分成的九个部分组成，当“边”设置了某个长度，角落的四个部分不发生变化，上下左右四个部分则发生一定的拉伸或者重复。

感觉翻译有点问题，看实际效果可能才能更好理解。

参数如下：

none
| Url Number{4}
(stretch | repeat){0,2}

下面使用QLabel设置背景来说明，最常用的用法如下，将图片填满控件：

QLabel{
	border-image:url(:/images/Resource/nine.png) 0 0 0 0 stretch strctch
}

此时拉伸Label会使背景图片跟着拉伸

          

 

四个数字相当于上、右、下、左“边”的宽度

四个数字如果是25 30 10 20则对应含义如下：

实际效果比较奇怪，类似于图片某个方向拉伸，如：

QLabel{
	border-image:url(:/images/Resource/nine.png) 50 0 0 0
}

 

不写后面两个参数默认都是stretch。

最后两个参数对应横向和纵向的策略，如：

QLabel{
	border-image:url(:/images/Resource/nine.png) 0 0 0 0 stretch repeat
}

横向拉伸纵向重复。

 

参考：

1.https://doc.qt.io/archives/qt-4.8/stylesheet-reference.html#border-image 

2.https://css-tricks.com/understanding-border-image/