关于如何使用QSS实现QPushButton QToolButton上的图片拉伸和文字对齐

需求：QSS实现按钮效果，图片在上，文字在下

 

1. 设计给的图片48x48图标

2.不采用设置icon的方式，因为icon无法响应鼠标按下操作，所以使用border-image，那么如何向下拉伸图片呢？如下：

QPushButton#pushButton
{

  border-image:url(:/image/icon_gd.png)48 0 0 0;
      border-width:48px 0px 0px 0px;
   font-size:18px;
   color:blue;
}

QToolButton#pushButton:hover
{
  border-image:url(:/image/icon_gd_hover.png)48 0 0 0;
      border-width:48px 0px 0px 0px;
}
拉伸参数解释

参数1:是将图片从下往上数到n个像素的位置
参数2:是将图片从右往左数到n个像素的位置
参数3:是将图片从上往下数到n个像素的位置
参数4:是将图片从左往右数第n个像素的位置

3.那么如何调整文字的显示位置呢？请调整控件的高度和border-width的值，（0，48px，0,0）即为文字的显示区域。大家可以自行测试，相信很快就会明白。

--------------------N个月后，似乎找到了更加合理的解决办法------------------------------------------------------------------

1.设置image ，image可以根据状态切换

2.设置border-color 或者border-image  

因为绘制有先后顺序：border>image->icon，这样就不用拿图标去做拉伸了，直接贴到底图上就可以了，至于文字的显示位置，可以设置padding-top