在主容器中main_box
,我添加了一个按钮btn
和一个彩色容器box
。
我box
添加了两个小部件:
back_picture
- 位于容器顶部的图像,使用BackPicture
.btn
绑定到remake
类方法的按钮会MyWindow
更改back_picture
.- 一个标签
label
,表明back_picture
它不是唯一的容器小部件box
。
申请窗口:
现在我需要覆盖back_picture
具有特殊特征的渐变:
- 垂直的
- 最底点的颜色为#2A303D,不透明度为 100%
- 最高点的颜色为#2A303D,不透明度为 50%
- 很重要!渐变的中心不在中间,即 下点和上点不相等。梯度的中心向上点移动,这意味着下点占据主导地位。用红色箭头标记渐变中心的点。
我画了一张清楚地显示差异的图片。数字1标记了带有偏移中心的渐变(正如我需要的那样),数字2标记了没有偏移中心的渐变(因为我不需要):
1号渐变是我的目标
我将用颜色展示渐变如何向某个点移动以使其更清晰。在第一种情况下,梯度向底部移动,在第二种情况下 - 向顶部移动:
在 illustrator 中工作时,我注意到 png 会记住像素的透明度级别。这让我想到可以简单地保存渐变图像并将其定位在back_picture
.
渐变图片:
如果您在某些图形编辑器中打开此图片,半透明像素将是真正的半透明。但是,令我非常失望的是,在应用程序窗口中,渐变显示为一个纯色正方形 #2A303D:
我需要以某种方式创建具有完全相同特征的渐变并将其准确定位在上方back_picture
(重要的是没有接缝可见),同时保持在back_picture
. 请帮助我做到这一点。
from PyQt5 import QtCore, QtWidgets, QtGui
class BackPicture(QtWidgets.QLabel):
def __init__(self, picture, x, *args, **kwargs):
super(BackPicture, self).__init__(*args, **kwargs)
self.setFixedSize(x, x)
self.x = x
self.setPicture(picture)
def setPicture(self, picture):
self.setPixmap(QtGui.QPixmap(picture).scaled(self.x, self.x, QtCore.Qt.KeepAspectRatio))
class MyWindow(QtWidgets.QWidget):
def __init__(self, parent = None):
super().__init__(parent)
self.index = 1
btn = QtWidgets.QPushButton('Remake', clicked = self.remake)
self.container = QtWidgets.QWidget()
self.container.setStyleSheet('background: #2A303D;')
self.container.setMinimumHeight(300)
self.container.setFixedWidth(300)
main_box = QtWidgets.QHBoxLayout(self)
main_box.addWidget(btn)
main_box.addWidget(self.container)
box = QtWidgets.QVBoxLayout(self.container)
box.setContentsMargins(0, 0, 0, 0)
self.back_picture = BackPicture('picture3.jpg', 300, self.container)
self.back_picture.move(0, 0)
#self.gradient = BackPicture('gradient.png', 300, self.container)
#self.gradient.move(0, 0) НЕ РАБОТАЕТ
label = QtWidgets.QLabel('Text number 1')
label.setStyleSheet(qss)
box.addStretch(6)
box.addWidget(label, alignment = QtCore.Qt.AlignCenter)
box.addStretch(1)
def remake(self):
if self.index == 1:
self.back_picture.setPicture('picture2.png')
self.index = 2
else:
self.back_picture.setPicture('picture3.jpg')
self.index = 1
qss = '''QLabel {
color: white;
font: bold 16px;
background: transparent;
}'''
if __name__ == '__main__':
import sys
app = QtWidgets.QApplication(sys.argv)
window = MyWindow()
window.setWindowTitle(' ')
window.show()
sys.exit(app.exec_())
您可以大致实现如下这样的渐变(最好在样式表中自行设置值):