学习Qss--背景属性

属性即控件的具体外观样式，比如背景颜色，边框宽度等等。

注意：一个属性并不是被所有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

取值：

• scroll：滚动（默认值）
• fixed：固定

作用：设置背景图片在带滚动条的控件（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;
}