说起样式表,不得不提的就是盒子模型了,今天小豆君就来给大家介绍下盒子模型。
上图是一张盒子模型图。
对于一个窗口,其包括四个矩形边框。以中间的边框矩形(border)为基准,在border外侧的是外边框矩形(margin),在border内侧的是内边框矩形(padding),在pandding内侧的是内容区矩形(content)。
在默认情况下,外边框和内边框的宽度为0,因此,这四个矩形区域就会重叠在一起。但你可以通过padding,margin属性来设置内外矩形的边宽。
矩形边框是用来设置窗口背景的。下面,我就来讲讲如何用这四个矩形来设置窗口背景。
1 为指定的矩形框,设置背景图片
为控件设置背景图片可以使用background-image属性,例如
QLabel{bakcground-image:url(:/background.png;)}
默认情况下,该背景图片会设置在border矩形区域中,但是,你可以使用bakground-clip来指定其绘制在margin,padding或content矩形区域中。
例如
QLabel {
background-image: url(:/images/header.png);
background-clip: padding;
}
2 指定背景图片绘制起始点
有时我们需要指定从图片的哪个起始点来绘制背景,这时,你可以通过background-position来指定,默认情况下是从左上角开始绘制(top left)。
例如
QLabel {
background: url(:/images/footer.png);
background-position: bottom left;
background-origin:padding;
}
该样式指定了从图片的右下角开始绘制背景到padding矩形区域中。
3 指定背景图片的重复样式
使用background-image会使用图片的原始大小来绘制背景,如果图片区域小于背景区域,则会重复使用该图片进行背景填充,而重复方式可以通过background-repeat来指定。如果想通过图片的缩放来填充背景图的话,可以使用border-image属性来设置。
例如
QLabel {
background-image: url(F:/Picture/Qt/small.jpg);
background-repeat:repeat-x ;
}
指定了只在水平方向重复。
4 使用其他属性设置背景图片
我们还可以使用image和border-image来设置控件的背景图片。
image:设置背景图片,当矩形区域大于图片尺寸时,图片不会被放大。并且默认情况下显示在矩形区域中心,可以通过image-position来指定位置。
border-image:会通过缩放来填满整个矩形区域。
image border-image background-image绘制顺序:image绘制在border-image之上,border-image绘制在background-image之上。
5 例子
下面是一个例子来帮助大家加深记忆。
好了,关于盒子模型及背景设置的知识就分享到这里啦,最后不要忘记点赞哦。
更多分享请关注微信公众号:小豆君Qt分享,只要关注,便可加入C++Qt交流群,一起学习。
https://zhuanlan.zhihu.com/p/36474238