pyqt5 结合背景图片 显示 内容 qtdesigner

pyqt5 结合背景图片 显示 内容 qtdesigner

UI 设计师 提供了一个 图片,这个图片的底色是透明的,
这个是一个png格式的图片
这个图片的名字是abc.png

如何在pyQt5 界面中,做一个界面, 显示正确的内容.

新建一个目录: png_show
在png_show 目录下面 新建一个目录 image
在image目录下面 放入 balance_bottom.png文件

在 png_show 中新建一个 main.py文件
内容如下:

import sys
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

from png_show import *


class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    myWin = MainWindow()
    myWin.show()
    sys.exit(app.exec_())

pycharm中
点击 png_show
然后选择菜单栏 Tools — >External Tools




菜单栏 File —>Save AS 另存为


变成 下面这个样子了:

拖过去,然后铺满窗口,修改名字

修改边框颜色:



border: 1px solid rgb(41, 57, 85)

参考:
Qt Style Sheet实践（四）：行文本编辑框QLineEdit及自动补全
https://www.cnblogs.com/csuftzzk/p/qss_lineedit_completer.html

添加背景图片

上面这个不对,需要删掉上面那句话:



border-image: url(:/pay/image/abc.png);

往 这个 图片上面对应的位置贴上QLabel控件
修改一下:

这样样式 只针对 父控件,widget_top 的子控件不会受影响,widget_top 上层的 widget的 objectname
参考:

/*
1、这里的#号表示，主控件不会影响子控件
2、设置多个样式，可以用双引号和分号
*/
    ui->groupBox_1->setStyleSheet("#groupBox_1{background-color:white;"
                                  "border-width:1px;"
                                  "border-style:solid;"
                                  "border-color:white}");

然后 执行 main.py

上面的三个 label 一次名字为: card_number_label, current_balance_label, current_money_label
修改mian.py代码 显示字符:

设置字体

代码如下:

import sys
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *

from png_show import *


class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)

        self.card_number_label.setText("123456789")
        self.current_balance_label.setText("999999")
        self.current_money_label.setText("6666666666666666")

if __name__ == "__main__":
    app = QApplication(sys.argv)
    myWin = MainWindow()
    myWin.show()
    sys.exit(app.exec_())

遇到的问题是 如何 ,将上面的图片中的 字体 变的 灰色一点.?
如何微调一下 label 控件的位置 和 卡号 等 字符对齐.

可以在qtdesign.exe 中微调一下 控件的大小, 使中心 对齐就好
字体颜色 可以使用:

font: 18pt “新宋体”;
color: rgb(120, 120, 120); 灰色
运行效果:

完整的工程代码:
https://download.csdn.net/download/wowocpp/12311563