GWT-Java-CSS-背景色不显示

我已经清除了缓存，尝试了Chrome和IE以及许多不同的编码方式，但是我无法显示按钮（铅笔按钮、蓝色按钮、绿色按钮和红色按钮）的背景色

java代码是：

    //Create the colour choice buttons and add them to the HorizontalPanel "headingContainer".
    //Pencil
    final Button pencilButton = new Button("P");
    pencilButton.addStyleName("pencilButton");
    headingContainer.add(pencilButton);
    //Set the pencil colour to pencil.
    pencilButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "black";  
        }
    });
    //Blue
    final Button blueButton = new Button("B");
    blueButton.addStyleName("blueButton");
    headingContainer.add(blueButton);
    //Set the pencil colour to blue.
    blueButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "blue";  
        }
    });
    //Green
    final Button greenButton = new Button("G");
    greenButton.addStyleName("greenButton");
    headingContainer.add(greenButton);
    //Set the pencil colour to green.
    greenButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "green";  
        }
    });
    //Red
    final Button redButton = new Button("R");
    redButton.addStyleName("redButton");
    headingContainer.add(redButton);
    //Set the pencil colour to red.
    redButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "red";  
        }
    });

CSS是：

.blueButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: blue;
  opacity: 1;
}

.greenButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: green;
  background-size: 100% 100%;
}

.pencilButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: grey;
  background-size: 100% 100%;
  opacity: 1;
}

.redButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: red;
}

你会注意到，我尝试了不同的东西在每一个试图得到背景颜色显示。理论是，一旦我有一个工作，然后我会改变其他匹配。CSS不应该很简单吗

非常感谢你的帮助

问候,

Glyn

您需要使用

background: red;

这是因为GWT按钮使用图像作为背景。因此，如果你只改变颜色，它会变成红色，但在图像下，所以你看不到它。如果您使用

background

规则，它将替换gwt Button类中应用于所有按钮的相同规则。

我最终在“”中找到此规则：

将“背景：红色”更改为“背景：红色！重要；”。另外，对于边界问题，请将“边界：0px纯白”更改为“边界：0px纯白！重要；”

感谢@AndreiVolgin的努力，尽管你没有提供答案，但你确实让我走上了正确的道路。非常感谢

问候,

---

Glyn

当你插入CSS时，你是否在你的gwt.xml中加载gwt主题？嗨@AndreiVolgin，我将每个主题都更改为“背景：”，清除缓存并在Chrome和IE上运行。两个浏览器中的任何按钮都没有显示背景颜色。另外，我在哪里可以找到更多适用于GWT的规则，这样我就不需要问细微差别的问题了？例如，“边框宽度：0；”也不起作用，因为我仍然在另一个小部件周围获得边框。对于每个小部件，Glyn.JavaDoc列出了应用于它的CSS类。例如，请参见。另一个方便的方法是查看GWT showcase并使用浏览器检查元素：这就是我尝试在按钮上添加“背景：红色”的地方，它成功了。嗨@AndreiVolgin，这是一件如此简单的事情，但它让我发疯了！“颜色：红色”给我红色文本，但是“背景：红色”不给我红色背景。在“”中，它们使用“背景色”。我非常感谢你的帮助。亲爱的，格林，你有没有试着申请背景：红色在GWT showcase中？showcase中的按钮和你的应用程序中的按钮有什么不同吗？嗨@AndreiVolgin，我无法编辑GWT showcase，所以我将.GWT按钮中的所有行复制到了我的.redButton中，并将行“background:url（“images/hborder.png”）repeat-x 0px-2077px；”更改为“background:red；”。我还尝试了“背景：红色重复-x0px-2077px；”。你好，格林