Qt中关于backgroundbackground-image和border-image的学习和记录

Posted 2020-12-18 banlcer

设置背景图已知有三种方法

background:url();//平铺
background-image:url();//平铺
border-image：url();//拉伸填充

其中第一种方法可以直接在尾部添加no-repeat阻止图片平铺；第二种则需要添加background-repeat语句：

background:url() no-repeat;//阻止平铺

backgroundimage:url();
background-repeat:no-repeat;//阻止平铺

在repeat中可以设置repeat-xy来限定横纵方向的平铺。

 

background中可以通过top bottom left right center五个关键字设置背景图的位置，也可以通过margin-left和margin-top设定像素位置。

background-position:top right;//设定在右上方

margin-left：34；
margin-top:34px;//设定背景图左上角坐标在（34，34）位置

暂未找到background-image调整大小的方法，这点存疑。

 

下面说说border-image。它是对图像进行缩放填充，有些细节要记录一下：

border-image最多有5个参数分别是url 上右下左的距离（边框大小）。参数可以省略或部分省略。

border:40;//等同于下

border-top:40;
border-right:40;
border-bottom:40;
border-left:40;

以上效果是锁定边框的大小。

border-image:url()0 27;
border-left:27;
border-right:27;
//以上初始化左右边框为27，之后锁定左右大小为27，只有拖拽都不会改变左右边框的水平大小
//实际是讲左右边框进行了缩放，所以此时如果初始化未设定边框大小，进行边框设定时会默认原比例；而如果初始了边框大小而未设置边框缩放，则默认为0，效果即为边框不显示

border-image:url()0 27;//左右27px不显示

border-image:url();
border-left:27;
border-right:27;//效果和最上相同，将左右27px锁定

border-image:url()0 15;
border-left:27;
border-right:27;//将左右15px拉伸至27px，锁定不随界面拉伸

加入把没有像素的位置进行拉伸就可以实现透明区域，算是变相实现绘图位置改变的一种手段了。

border-image:url()0;
border:27;//四周显示透明区域