如何叠加/覆盖包含透明 PNG 图像的标签？答案

【问题标题】：How to superimpose/overlay QLabels which contain tranpartent PNG images?如何叠加/覆盖包含透明 PNG 图像的标签？
【发布时间】：2017-05-20 04:34:56
【问题描述】：

我正在尝试实现某种进度条，前面有一个网格。我有一个带有透明“孔”的 PNG，用作进度条前面的遮罩。

我尝试创建一个QStackedLayout，其中包含两个标签：一个将填充纯色，另一个将包含用于叠加层的 PNG。

我认为QStackedLayout::StackAll 将允许布局中的所有小部件可见。

QStackedLayout *stackedLayout = new QStackedLayout(ui->widget_progressbar);
stackedLayout->setStackingMode(QStackedLayout::StackAll);

label_fill = new QLabel();
label_fill->setFixedSize(100, 100); // just for testing
label_fill->setStyleSheet("background-color: #669966");
stackedLayout->addWidget(label_fill);

label_foreground = new QLabel();
label_foreground->setStyleSheet("border-image: url(:/img/mask.png) 0 0 0 0 stretch stretch;");
stackedLayout->addWidget(label_foreground);

使用上面的代码，绿色矩形位于前景中，覆盖了遮罩。如果我将它们添加到布局中重新排序，或者如果我使用stackedLayout->setCurrentWidget(label_foreground); 或label_foreground->raise();，那么label_fill 根本不可见。 PNG中的透明孔显示布局所在小部件的背景颜色。我通过更改父小部件的颜色确认了这一点，我可以在透明孔中看到更改的颜色。

我在样式表中使用border-image，以便自动缩放图像。但是，使用background-image 样式或只是简单地使用label_foreground()->setPixmap(...)，它仍然存在相同的透明度问题。

这样做的“官方”方式是什么？

当然，如果我真的需要，我可以通过编辑 QPixmaps 来做到这一点，但是我将不得不处理调整大小事件。有没有办法用布局解决这个问题，而不必实现我自己的布局管理器？

我想我会使用QGraphicsScene，但我仍然很好奇是否有基本布局的解决方案。

【问题讨论】：

查看 QWidget::autoFillBackground 文档。那里有一个警告，当您使用带有边框图像的样式表时，此属性被禁用，您拥有。我不确定这到底是什么效果，但是您可以使用 setPixmap 代替样式表，而不是使用样式表。
@goug ：不幸的是，setPixmap 也是如此，正如问题中已经提到的那样。
我已经重新阅读了这个问题，您实际上并没有说您使用 setPixmap 而不是样式表尝试了这个。也许你的意思是暗示，但肯定不是很清楚。

标签： c++ qt user-interface layout

【解决方案1】：

问题是我的label_foreground 继承了其父级 (ui->widget_progressbar) 的样式表，因此它具有纯色背景。在PNG图片的透明洞里，不是我看到的parent，而是label本身的背景色。

为标签添加透明背景解决了问题：它现在可以通过图像的透明部分正确显示其下方的其他小部件：

label_foreground->setStyleSheet("background-color: rgba(0,0,0,0); border-image: url(:/img/mask.png) 0 0 0 0 stretch stretch;");

【讨论】：