qpushbutton使用qss设置背景图标

Question

使用qss做这样一个按钮

QPushButton {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: top;
    padding-top: 2px;
    background-repeat: no-repeat;
}

问：如何控制图标的大小（那个小房子图标）？

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

要控制图标的大小，你可以使用background-size属性来设置。

以下是两种解决方案：

1. 使用像素值进行控制：

   • 将background-size属性添加到你的样式中，并使用像素值来指定图标的宽度和高度，例如background-size: 20px 20px;。
   • 这将使图标的宽度和高度都被设置为20像素。

2. 使用百分比进行控制：

   • 将background-size属性添加到你的样式中，并使用百分比值来指定图标的宽度和高度，例如background-size: 50% auto;。
   • 这将使图标的宽度被设置为按钮宽度的50%，高度自适应。

以下是修改后的代码示例：

QPushButton {
    background-color: #60C171;
    background-image: url(:/images/home_small.png);
    background-origin: content;
    background-position: top;
    padding-top: 2px;
    background-repeat: no-repeat;
    background-size: 20px 20px; /* 使用像素值控制图标大小 */
    /* 或者使用 background-size: 50% auto; 使用百分比控制图标大小 */
}

记得将20px或50%替换为你想要设置的具体大小。