什么是border image?

A border image is an image that is composed of nine parts (top left, top center, top right, center left, center, center right, bottom left, bottom center, and bottom right). When a border of a certain size is required, the corner parts are used as is, and the top, right, bottom, and left parts are stretched or repeated to produce a border with the desired size.

See the CSS3 Draft Specification for details.

所谓border image是这样一种图片，它由九宫格分成的九个部分组成，当“边”设置了某个长度，角落的四个部分不发生变化，上下左右四个部分则发生一定的拉伸或者重复。

感觉翻译有点问题，看实际效果可能才能更好理解。

参数如下：

none
| Url Number{4}
(stretch | repeat){0,2}

下面使用QLabel设置背景来说明，最常用的用法如下，将图片填满控件：

QLabel{border-image:url(:/images/Resource/nine.png) 0 0 0 0 stretch strctch
}

此时拉伸Label会使背景图片跟着拉伸

四个数字相当于上、右、下、左“边”的宽度

四个数字如果是25 30 10 20则对应含义如下：

实际效果比较奇怪，类似于图片某个方向拉伸，如：

QLabel{border-image:url(:/images/Resource/nine.png) 50 0 0 0
}

不写后面两个参数默认都是stretch。

最后两个参数对应横向和纵向的策略，如：

QLabel{border-image:url(:/images/Resource/nine.png) 0 0 0 0 stretch repeat
}

横向拉伸纵向重复。

参考：

1.https://doc.qt.io/archives/qt-4.8/stylesheet-reference.html#border-image

2.https://css-tricks.com/understanding-border-image/

Qt-使用border image填满背景相关推荐

html中的高和宽背景色怎么写,css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
html5 css背景图片满,css background-size与背景图片填满div
back和第,.年过事工宗据指数遍互业经搞断果会ground-size与背景图片抖要支圈者器说是事天开的.年后编定功口小发还应久剑填满div 在开发中,常分博累发口小定逻间框加题览果些屏洁动理应有需要 ...
Qt TableView数据列宽度自适应, 横向填满表格
Qt开发,读取数据库数据,用TableView展示,发现字段少的时候,右边空出一大块,影响外观. 怎样让各列宽度自适应,填满表格区域呢? 网上找到了答案: https://stackoverflow. ...
CSS —— 背景图片填满DIV、鼠标滑过放大图片
1.让背景图片填满DIV 应用background-size属性可以设置背景图片填满整个div,background-size取值及解释如下: (1)background-size:cover MDN ...
html添加背景图片并且填满div,css background-size与背景图片填满div(示例代码)
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
图片填满外层div 自适应不拉伸变形
#max-width:100% 相对于img本身的尺寸而言,最大的宽度为自身宽度 #width:100% 相对于父级宽度的 1.等比例缩小垂直居中:按宽度等比列缩放或者可以选择按高度等比缩放 ...
一个div分上下两部分，上部分高度不固定，下面部分自动填满剩余高度
div自动填满剩余高度 html <div class="wrapper" style="height:800px;"><div class= ...
html 图片填充方式,css怎么让图片填满？
在css中,可以将div的高度和宽度属性设置为100%,同时使用background-size属性设置背景图片为100%,便可以实现背景图片铺满屏幕. css怎么让图片填满? 1.新建一个HTML文件 ...

Qt-使用border image填满背景

什么是border image?

Qt-使用border image填满背景相关推荐

最新文章

热门文章