码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-24 15:34:43      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:color   大小   区域   坐标   默认   添加   效果   repeat   back   

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

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;//四周显示透明区域

  

 

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

标签:color   大小   区域   坐标   默认   添加   效果   repeat   back   

原文地址:https://www.cnblogs.com/banlcer/p/13371245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!