[QT] 背景圖片

在QT中指定widget 背景圖片的一個方法是使用 stylesheet,如下

QString imageFile = QApplication::applicationDirPath() + "/background/background.bmp";
this->setStyleSheet(QString("background-image: url(%1);").arg(imageFile));

而當背景圖比 widget 長寬還要小時, 會自動"並排顯示"(tile), 如果背景圖是由重覆性的小圖像組成這倒無所謂, 但如果不是的話, 就會造成困擾, 例如背景是一張東京鐵塔的圖, 而當視窗放到最大時, 就會看到2個東京鐵塔以上....



因此我們應該使用的css樣式背景屬性不是 background-imag, 而是 border-image

QString imageFile = QApplication::applicationDirPath() + "/background/b.bmp";
ui.frame->setStyleSheet(QString(" border-image: url(%1) 3 10 3 10; ").arg(imageFile));

3 10 3 10的意思請參考底下這段文字
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.


但這樣又有一個問題, 當這個stylesheet指定到一個 UI container上時, 這個屬性也會apply到children上...(如以下視窗中的PushButtn widget..)




這時要用指定obj-name的方式, #frame中的frame即是指定widget的obj-name, 格式如下

#obj-name {...css property...}

QString imageFile = QApplication::applicationDirPath() + "/background/b.bmp";
ui.frame->setStyleSheet(QString("#frame{ border-image: url(%1) 3 10 3 10;border-width: 4px;} ").arg(imageFile));

效果如下, 不管視窗縮小或放大, 都只會有一隻兔子..XD



而底下的link中的範例為

 QPushButton {
             color: grey;
             border-image: url(/home/kamlie/code/button.png) 3 10 3 10;
             border-top: 3px transparent;
             border-bottom: 3px transparent;
             border-right: 10px transparent;
             border-left: 10px transparent;
         }

最後感謝我家兔子"老皮"的配合...

reference:http://doc.trolltech.com/4.5/stylesheet-reference.html#border-image

http://doc.trolltech.com/4.5/stylesheet-customizing.html#the-box-model

http://pepper.troll.no/s60prereleases/doc/stylesheet-examples.html