文章目录

一、background-color
二、background-image
三、background-repeat
四、background-position
五、background-attachment
六、background-clip
七、background-origin
八、背景属性的连写格式

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

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

学习Qss--背景属性相关推荐

css语言中选项是背景图像的属性,HTML_学习CSS的背景图像属性background，CSS的背景属性“background”提供 - phpStudy...
学习CSS的背景图像属性background CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看backgr ...
零基础学习CSS---05.CSS背景属性详解
CSS属性一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...
学习记录 --【零基础CSS学习】16.背景属性
目录一.背景颜色二.背景图片三.背景重复四.背景尺寸五.背景定位六.背景固定(不常用,仅作了解) 七.背景属性的简写一.背景颜色 1. background-color:合法的颜色值: ...
自学web前端怎么学？web前端学习路线css属性
自学web前端技术,如果才能找到一份web前端的工作.按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以.找到一份web前端工作需要掌握的内容如下: 首先是html,css ...
CSS背景属性、定位
文章目录前言一.css的常用样式-背景属性 1.背景颜色 background-color 2.背景图片 background-image 3.背景重复 background-repeat 4.背 ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
CSS背景：背景色/背景图像/背景重复/背景附着/简写背景属性（一文搞懂）
目录 CSS背景 CSS 背景色实例其他元素实例不透明度 / 透明度实例使用 RGBA 的透明度实例 CSS 背景图像实例实例实例 CSS 背景重复实例实例 CSS backg ...
【CSS 背景属性 background】
CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性集中定义 8个背景相关属性 2. background-color 属性: 元素的背景颜色 ( ...
用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)
但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...

学习Qss--背景属性