學習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;
}