Question

我已经清除了我的缓存并尝试了Chrome和IE以及许多不同的编码方式，但我无法获得按钮的背景颜色（pencilButton，blueButton，greenButton和redButton）来显示。

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不应该简单吗？

非常感谢您的帮助。

此致

格林

Answer 1

您需要使用

background: red;

它有效，因为GWT按钮使用图像作为背景。因此，如果你只改变颜色，它会变成红色但在图像下面，所以你看不到它。如果您使用background规则，它将替换应用于所有按钮的gwt-Button类中的相同规则。

Answer 2

我终于在“GWT theme style overrides my css style”中找到了这个：

将“background：red”更改为“background：red！important;”。另外，对于我的边框问题更改“border：0px solid white;”到“border：0px solid white！important;”。

感谢@AndreiVolgin的努力，虽然你没有提供答案，但你确实让我走上正轨。非常感谢你。

此致

格林

GWT - Java - CSS - 背景颜色未显示

2 个答案: