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

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 类中的相同规则。