一、background-color

取值：Brush类型

(资料图片仅供参考)

作用：设置控件的背景颜色，默认是border之内的矩形区域，包括内边距和内容矩形。

二、background-image

取值：Url类型，格式是​url(filename)​​，filename是一个本地文件路径或Qt资源文件路径，不支持网络图片

作用：设置控件的背景图片。可以与背景颜色共存，背景图片会覆盖背景颜色，在没有被图片覆盖的区域，显示背景颜色。

Qt学习基地（免费报名学习）：

三、background-repeat

取值：

作用：设置背景图片的平铺方式

例子：给一个QTextEdit设置背景图片，代码和效果分别如下：

QTextEdit{background-color: skyblue;background-image: image: url(:/Image/);background-repeat: no-repeat;/*repeat-x; repeat-y; repeat;*/}

repeat:

no-repeat：

repeat-x:

repeat-y:

四、background-position

取值：

格式：​​background-position: 水平对齐方式 垂直对齐方式;​​

这是css规定的标准顺序，而qss并为严格规定，但建议按照css的顺序写；

作用：设置背景图片的对齐方式，默认情况下向左向上对齐；

举例：水平向左垂直居中对齐，代码和效果如下：

QTextEdit{background-color: skyblue;background-image: url(:/Image/);background-position: left center}

五、background-attachment

取值：

scroll：滚动（默认值）

fixed：固定

作用：设置背景图片在带滚动条的控件（QAbstractScrollArea）中是固定在一个位置，还是随着滚动条滚动；

举例：

QTextEdit{background-color: skyblue;background-image: url(:/);background-repeat: no-repeat;/*repeat-x; repeat-y; repeat;*/background-position: right center;background-attachment: scroll;}

QTextEdit{background-color: skyblue;background-image: url(:/);background-repeat: no-repeat;/*repeat-x; repeat-y; repeat;*/background-position: right center;background-attachment: fixed;}

六、background-clip

取值:

作用：设置背景颜色覆盖的区域，默认情况下背景值覆盖内边距矩形，如果没有指定，默认值为border

举例：为了区别各矩形，我们先给QTextEdit设置边框，内边距和外边距，为了区别明显，我们将边框宽度设置大一点，代码和图片如下：

QTextEdit{background-color: skyblue;border: 20px solid purple;padding: 20px;margin: 20px;background-image: url(:/Image/);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/);/*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/) repeat left top;}

【领 QT开发教程 学习资料， 点击下方链接莬费领取↓↓ ，先码住不迷路~】

点击这里：