qpushbutton,想弄个背景图片给按钮

qpushbutton,想弄个背景图片给按钮

我有个qpushbutton,想弄个背景图片给按钮做背景

先是遇到了坑,用样式表不管用:


我用setStyleSheet之后,这个半透明的png图像就变成了带白底色的——Qt 样式表的background-image会自动填充底色,PNG 透明通道会丢失,出现白色背景。 解决办法不用background-image,改用图片画在按钮底层

重写按钮 paintEvent(完美保留透明通道,首选)

新建透明按钮类 TransparentBtn.h

#ifndef TRANSPARENTBTN_H #define TRANSPARENTBTN_H #include <QPushButton> #include <QPainter> class TransparentBtn : public QPushButton { Q_OBJECT public: explicit TransparentBtn(QWidget *parent = nullptr); void setBgPixmap(const QPixmap &pix); protected: void paintEvent(QPaintEvent *event) override; private: QPixmap m_bg; }; #endif

TransparentBtn.cpp

#include "TransparentBtn.h" TransparentBtn::TransparentBtn(QWidget *parent) : QPushButton(parent) { } void TransparentBtn::setBgPixmap(const QPixmap &pix) { m_bg = pix; } void TransparentBtn::paintEvent(QPaintEvent *event) { QPushButton::paintEvent(event); QPainter p(this); // 绘制PNG原图,透明通道完全保留 p.drawPixmap(rect(), m_bg); }

使用:

// ui里把控件提升为TransparentBtn ui->pushButton->setBgPixmap(QPixmap(":/img/trans_bg.png")); ui->pushButton->setText("文字正常居中");

文字自动覆盖在图片上层,不会被挤开,透明 PNG 不会变白底。

然后又遇到了:重写按钮paintEvent管用,但是文字在图片之下,怎么改一下

你现在先画背景图,再调用基类绘制文字,顺序反了。 调换绘制顺序:

  1. 先用画家画出透明背景图
  2. 再调用父类 paintEvent 绘制文字(文字就会盖在图片上面)

修改后的 paintEvent

void TransparentBtn::paintEvent(QPaintEvent *event) { QPainter p(this); // 第一步:先画透明背景图 if (!m_bg.isNull()) { p.drawPixmap(rect(), m_bg); } // 第二步:再执行原生按钮绘制(文字、鼠标悬浮效果都会画在图片上层) QPushButton::paintEvent(event); }

配套属性(防止底色干扰透明 PNG)

构造函数里加上两句,彻底杜绝白底:

TransparentBtn::TransparentBtn(QWidget *parent) : QPushButton(parent) { setAttribute(Qt::WA_TranslucentBackground); setStyleSheet("border:none; background-color:transparent;"); }

效果: PNG 透明正常显示,按钮文字正常居中,悬浮、点击样式都保留,文字始终浮在图片之上。