【翻译 + 整理】Qt样式表详解（2）：属性——背景相关属性

1、alternate-background-color：交替背景色，用于QAbstractItemView的子类（QColumnView、QHeaderView、QListView、QTableView、QTreeView）。使用的前提是开启了隔行变色设置：

    setAlternatingRowColors(true);

例，设置两个交替变换的背景色：

 QTreeView {
     alternate-background-color: blue;
     background: yellow;
 }

2、background-color：背景色。 

3、background：设置背景的简写形式。等效于指定background-color, background-image, background-repeat或background-position。以下类及其子类支持此属性：QAbstractItemView、QAbstractSpinBox、QCheckBox、QComboBox、QDialog、QFrame、QGroupBox、QLabel、QLineEdit、QMenu、QMenuBar、QPushButton、QRadioButton、QSplitter、QTextEdit、QToolTip、普通QWidgets。
例：

 QTextEdit{
    background: yellow 
}

 QPushButton{
    background:url(D:/a.png);
}

 QPushButton{
    background: "#FFFFFF" url(D:/a.png);
}

同时设置颜色和图片：

4、background-image：背景图片。例：

 QFrame { background-image: url(:/images/hydro.png) }

5、background-repeat：背景图片在哪个方向重复。如果未指定此属性，则在两个方向（重复）上重复背景图像。

• repeat-x：水平方向重复
• repeat-y：垂直方向重复
• repeat：水平和垂直方向重复
• no-repeat：不重复

例：

 QPushButton{
    background: url(D:/a.png) "#FFFFFF";
    background-repeat: repeat-x;
}

 QPushButton{
    background: url(D:/a.png) "#FFFFFF";
    background-repeat: repeat-y;
}

 QPushButton{
    background: url(D:/a.png) "#FFFFFF";
    background-repeat: repeat-xy;
}

6、background-position：背景图像在background-origin矩形内的对齐方式。如果未指定此属性，则对齐方式位于左上角。例：

 QPushButton{
	background: url(D:/a.png) "#FFFFFF";
	background-position:bottom right;
	background-repeat:x;
}

7、background-attachment：设置QAbstractScrollArea中的背景图像是相对于视口滚动还是固定的。 这个属性和在QSS中只有两个值（和CSS不同）。默认情况下，背景图像与视口一起滚动。例：

滚动：

 QTextEdit {
     background-image: url(D://a.png);
     background-attachment: scroll;
 }

固定：

 QTextEdit {
     background-image: url(D://a.png);
     background-attachment: fixed;
 }

8、background-clip：设置元素的背景（背景图片或颜色）的填充规则。以下类及其子类支持此属性：QAbstractItemView、QAbstractSpinBox、QCheckBox、QComboBox、QDialog、QFrame、QGroupBox、QLabel、QPushButton、QRadioButton、QSplitter、QTextEdit、QToolTip。普通QWidgets也支持此属性。如果没有指定，默认值为border。

盒子模式：

例：

 QPushButton{
	background: url(D:/a.png) "#FFFFFF";
    background-clip: content;
    padding:50px;
}

9、background-origin：小部件的背景矩形，与background-position和background-image结合使用。值和background-clip一样。QAbstractItemView、QAbstractSpinBox、QCheckBox、QComboBox、QDialog、QFrame、QGroupBox、QLabel、QPushButton、QRadioButton、QSplitter、QTextEdit、QToolTip。普通QWidgets也支持此属性。
如果未指定此属性，则默认值为padding。

10、background-origin和background-clip的区别：

从名字上看clip是裁剪，即控件是设置背景之后，你想要设置裁剪掉一部分，只显示一部分，这时候可以用background-clip设置裁剪的区域。

origin意思是“原始”，background-origin设置铺设背景从哪个位置开始。

图片来自：https://blog.csdn.net/weixin_39256994/article/details/78698145

推荐阅读：

学习Qss--背景属性

CSS background-clip属性

CSS background-origin属性