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類中應用於所有按鈕的相同規則。

Answer 2

我終於在“ GWT主題樣式覆蓋我的CSS樣式 ”中找到了這一點：

將“背景：紅色”更改為“背景：紅色！重要；”。 另外，對於我的邊界問題，請更改“ border：0px純白色；” 改為“邊框：0px純白色！重要；”。

感謝@AndreiVolgin所做的努力，盡管您沒有提供答案，但確實使我步入正軌。 非常感謝您。

問候，

格林