文章目录
属性即控件的具体外观样式,比如背景颜色,边框宽度等等。
注意:一个属性并不是被所有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;
}