Step 1: Add qrc resource file
(1) Select the project, right click "Add New File" -> "Qt" -> "Qt Resource File" -> fill in the file name
(2) Right-click the newly added .qrc file -> "Add Existing File" -> Import the picture into the file
Step 2: Enter the UI interface
(1) Select the control that needs to add a picture, right-click, and select "Change Style Sheet"
(2) Click the inverted triangle next to "Add resource", and three options will appear: background-image, board-image, image, choose one according to your needs
(3) Finally, select the picture you want to add in the dialog box that pops up
Note: The added picture is required to be in png format, the picture in jpg format cannot be displayed, you can use the drawing that comes with the computer
The software opens the picture in jpg format and saves it as png format.
Note:
If you do not select the inverted triangle next to "Add Resource", but directly click "Add Resource", and then continue to select pictures, the bottom left of the dialog box will prompt "Invalid Style Sheet". The reason is that the added picture does not have Determine the way to add. At this time, the solution is to add "background-image:", "board-image:" or "image:" in front of "url(:/Pictures/bigbackground.png)". Actual demand selection
Qwidget cannot load the background image, or the designer displays the background image, but it does not display at runtime
1. There are two setting methods, as follows:
1. Use the style sheet to set the background of the form.
There are still some things to pay attention to when using the style sheet to set the background image. If it is in the mainwindow and dialog, right-click the change style sheet and select background-image or border-image in add resource, select the resource The picture in the file is fine (the former is to display the picture by pixel, the latter can automatically scale the picture according to the size of the window, usually use the latter, if the interface of the former is not the same size as the picture, the display of the background may not be the whole picture up)
a. But it doesn’t work in the widget. You will find that, using the same method, the background has not changed, but only the background image of its sub-window has changed. So how to do it in the widget, we place a frame in the widget, and then set the background of the frame through the stylesheet, and all the components in the subsequent form are placed in this frame.
b. We know that the child form will inherit the properties of the parent form, that is to say, the background of the parent form will also exist in the child form, so how to prevent the child form from inheriting the background of the parent form? Similarly, in the Edit Style Sheet, you need to enter the following code: (This will solve the problem that the buttons, QLabel and other controls in the form are the same as those in the main form.)
#desktop {undefined
border-image: url(:/images/desktop.jpg);
}
#desktop * {undefined
border-image:url();
}
desktop is your form name.
For example QWidget widGet; the style sheet needs to be written as
#widGet {undefined
border-image: url(:/images/desktop.jpg);
}
#widGet * {undefined
border-image:url();
}
for QWidget designers with background images , but there is no runtime, you need to use the following method
2. However, it can also be realized by the following code:
QWidget *widget = new QWidget();
widget->setAutoFillBackground(true);
QPalette palette;
QPixmap pixmap(":/Resources/Penguins.jpg");
palette.setBrush(QPalette ::Window, QBrush(pixmap));
widget->setPalette(palette);
widget->show();