QSS背景图片

background-image 和 border-image的区别。

拉伸与重复

1
2
3
4
5
6
QFrame *frame = new QFrame;
//不会自动适应图片，background-image图片尺寸不变，
//会重复或空出一块区域，取决于 background-repeat属性的设置
frame->setStyleSheet("background-image:url(:/image/test.jpg)");
//图片可以自动居中显示，控件大小改变时会自动拉伸，但是设置边框属性无效
frame->setStyleSheet("border-image:url(:/image/test.jpg)");

总结

  1. border-image：
    • 图片可以自动居中显示；
    • 控件大小改变时会自动拉伸；
    • 但是设置边框属性无效；
    • 当控件大小需要改变或图片需要拉伸时使用。
  2. background-iamge：
    • 图片不会自动居中显示；
    • 可以设置其background-position:属性，使其居中显示，甚至可以利用该属性，灵活控制QPushButton中图标和文字的位置
    • 可以设置边框（border）的属性。
  3. 如果同时指定border-image和background-iamge，那么border-image在上

参考

  1. 博客园 ↩