属性即控件的具体外观样式，比如背景颜色，边框宽度等等。
注意：一个属性并不是被所有widget都支持的，要想查看什么widget支持哪些属性，或一个属性被哪些widget支持，请查看官方文档。
一、background-color
取值：Brush类型
作用：设置控件的背景颜色，默认是border之内的矩形区域，包括内边距和内容矩形。
二、background-image
取值：Url类型，格式是url(filename)，filename是一个本地文件路径或Qt资源文件路径，不支持网络图片
作用：设置控件的背景图片。可以与背景颜色共存，背景图片会覆盖背景颜色，在没有被图片覆盖的区域，显示背景颜色。
三、background-repeat
取值：
- repeat-x：在水平方向上平铺
- repeat-y：在垂直方向上平铺
- repeat：在水平和垂直方向上都平铺，这是默认值（但是Qt好像有bug，设置了repeat反而不会平铺，不设置才平铺）
- no-repeat：不平铺
作用：设置背景图片的平铺方式
例子：给一个QTextEdit设置背景图片，代码和效果分别如下：
QTextEdit
{
background-color: skyblue;
background-image: image: url(:/Image/1.png);
background-repeat: no-repeat;/*repeat-x; repeat-y; repeat;*/
}
repeat:
no-repeat：
repeat-x:
repeat-y:
四、background-position
取值：
| 取值 | 效果 |
|---|
| top | 向上对齐 | | bottom | 向下对齐 | | center | 居中对齐 | | left | 向左对齐 | | right | 向右对齐 |
格式：background-position: 水平对齐方式 垂直对齐方式;
这是css规定的标准顺序，而qss并为严格规定，但建议按照css的顺序写；
作用：设置背景图片的对齐方式，默认情况下向左向上对齐；
举例：水平向左垂直居中对齐，代码和效果如下：
QTextEdit
{
background-color: skyblue;
background-image: url(:/Image/1.png);
background-position: left center
}
五、background-attachment
取值：
作用：设置背景图片在带滚动条的控件（QAbstractScrollArea）中是固定在一个位置，还是随着滚动条滚动；
举例：
QTextEdit
{
background-color: skyblue;
background-image: url(:/Image.1.png);
background-repeat: no-repeat;/*repeat-x; repeat-y; repeat;*/
background-position: right center;
background-attachment: scroll;
}
QTextEdit
{
background-color: skyblue;
background-image: url(:/Image.1.png);
background-repeat: no-repeat;/*repeat-x; repeat-y; repeat;*/
background-position: right center;
background-attachment: fixed;
}
六、background-clip
取值:
| 取值 | 效果 |
|---|
| margin | 外边距矩形 | | border | 边框矩形 | | padding | 内边距矩形 | | content | 内容矩形 |
作用：设置背景颜色覆盖的区域，默认情况下背景值覆盖内边距矩形，如果没有指定，默认值为border
举例：为了区别各矩形，我们先给QTextEdit设置边框，内边距和外边距，为了区别明显，我们将边框宽度设置大一点，代码和图片如下：
QTextEdit
{
background-color: skyblue;
border: 20px solid purple;
padding: 20px;
margin: 20px;
background-image: url(:/Image/1.png);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
分别将 background-clip 属性的值设为 margin, border, padding, content, 效果图如下
margin:
border:
padding:
content:
可见，background-clip属性只对背景的渲染区域有关系，背景图片始终是靠在padding边上
七、background-origin
取值：与background-clip一样
作用：与background-position和background-image一起使用，指明背景图片的覆盖范围矩形，如果没有指定，默认为padding
举例：下面是分别设置为margin，border，padding和content的代码和效果图：
QTextEdit
{
background-color: skyblue;
border: 20px solid purple;
padding: 20px;
margin: 20px;
background-image: url(:/Image/1.png);
/*background-repeat: no-repeat;*/
background-position: left top;
background-attachment: fixed;
background-clip: margin;
background-origin: margin;
}
margin:
border:
padding:
content:
八、背景属性的连写格式
格式：
background: color image repeat position;
在这种连写格式中，只能包含着四个属性，其他几个仍然需要单独写，而且这四个属性可以省略任何一个，最多可以省略三个，也就是最少需要保留一个，即属性值不能为空。另外让人比较迷惑的是，在这种连写方式中，repeat确实是平铺了图片，而单独写时，它又是不平铺的。
举例：
QTextEdit
{
border: 20px solid purple;
padding: 20px;
margin: 20px;
background: skyblue url(:/Image/1.png) repeat left top;
}
|
