Qt样式表之盒子模型(以QSS来讲解,而不是CSS)
说起样式表,不得不提的就是盒子模型了,今天小豆君就来给大家介绍下盒子模型。
上图是一张盒子模型图。
对于一个窗口,其包括四个矩形边框。以中间的边框矩形(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
Qt样式表之盒子模型(以QSS来讲解,而不是CSS)的更多相关文章
- Qt样式表之一:Qt样式表和盒子模型介绍
一.Qt样式表介绍 Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CS ...
- qt 样式表基本用法
Qt样式表 QT样式表参考CSS层叠样式表设计,不同之处在于QT样式表应用于Widget世界. 可以使用QApplication::setStyleSheet()函数设置到整个应用程序上,也可以使用Q ...
- 【Qt开发】QT样式表单 qss的样式优化
QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观. 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开. 它的语法和概念和HTML CSS也是 ...
- Qt样式表之二:QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
- QT样式表
QT样式表 一.QT样式表简介 1.QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能. QT样式表是允许用户定制widgets组件外观的强大机制 ...
- 通过Qt样式表定制程序外观(比较通俗易懂)
1. 何为Qt样式表[喝小酒的网摘]http://blog.hehehehehe.cn/a/10270.htm2. 样式表语法基础3. 方箱模型4. 前景与背景5. 创建可缩放样式6. 控制大小7. ...
- 【转】QT样式表 (QStyleSheet)
作者:刘旭晖 Raymond 转载请注明出处Email:colorant@163.comBLOG:http://blog.csdn.net/colorant/ 除了子类化Style类,使用QT样式表( ...
- Qt样式表使用注意项
Qt样式表使用注意项 <1>.StyleSheet的使用StyleSheet文件的默认后缀名为qss,可以通过命令行参数-stylesheet filename.qss来设置样式表,也可以 ...
- Qt样式表的使用
Qt中可以灵活的使用层叠样式表(CSS),其语法和CSS很相似.因为HTML CSS的灵活性,所以可以很方便的为QT界面设计自己需要的外观.除了子类化Style类,使用QT样式表(QStyleShee ...
随机推荐
- hdu 6363 bookshelf
题解讲的很清楚了,直接看代码就懂了 题解:http://bestcoder.hdu.edu.cn/blog/2018-multi-university-training-contest-6-solut ...
- IDEA修改当前工程jdk版本
1.ctrl+shift+alt+s 2.根据实际情况修改jdk版本
- 【转】黄聪:HtmlAgilityPack教程案例
[转]黄聪:HtmlAgilityPack教程案例 HtmlAgilityPack中的HtmlNode类与XmlNode类差不多,提供的功能也大同小异.下面来看看该类提供功能. 一.静态属性 publ ...
- ArcGIS api for javascript——地图配置-
描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...
- cocos2d-x 3.1.1学习笔记[23]寻找主循环 mainloop
文章出自于 http://blog.csdn.net/zhouyunxuan cocos2d到底是怎样把场景展示给我们的,我一直非常好奇. 凭个人猜想,引擎内部的结构类似于这样 while(true ...
- Android程序猿自己动手制作.9.png图片
1:怎样制作9.png图片素材: 打开SDK工具文件夹下: draw9patch.zip 解压执行draw9patch.bat.有的直接搜索会有:draw9patch.bat. 双击执行后,例如以下 ...
- C语言keywordstatic的绝妙用途
为什么要说static妙,它确实是妙,在软件开发或者单片机开发过程中,大家总以为static就是一个静态变量.在变量类型的前面加上就自己主动清0了.还有就是加上statickeyword的,无论是变量 ...
- VS链接数据库
可以用VS链接数据库,并进行数据库操作.前提是安装了Sqlserver,活着连接线上的数据库服务器.
- datatable设置成中文
$('#datatable').DataTable({ language: { "sProcessing": "处理中...", "sLengthMe ...
- tensorflow学习之路---解决过拟合
''' 思路:1.调用数据集 2.定义用来实现神经元功能的函数(包括解决过拟合) 3.定义输入和输出的数据4.定义隐藏层(函数)和输出层(函数) 5.分析误差和优化数据(改变权重)6.执行神经网络 ' ...