javascript - CSS 按钮背景图片不显示

Question

我在网上尝试了多个资源，最后把很多东西放在一起。我个人知道它们是如何工作的，但不确定我在这里做错了什么。

我的 CSS 看起来像这样:

    .chatButton {
    position: fixed;
    border: 0;
    overflow: hidden;
    bottom: 50px;
    right: 50px;
    border-radius: 50%; 
    width: 70px;
    height: 70px;
    box-shadow: 0px 5px 10px #888888;
    transition: all ease 0.3s;
    background-image: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
    background-size: contain;
    background-position: center;
    background-color: inherit;
}
.chatButton:hover {background-color: #888888; bottom: 55px;}

.chatButton:active {
  box-shadow: 0 3px 0 #888888;
}

我的 html 是这样的:

<oj-button class="chatButton" on-oj-action="[[openListener]]">

      </oj-button>

我正在使用 oracle jet，但即使我删除 oj-button 并使用普通按钮，我也无法显示背景图像。

有什么想法吗？

Answer 1

所以我是 oracle jet 的新手，但我发现了一些东西:

使用 background-image 属性存在一些问题。

这是一些 Examples from oracle :

我找到了一个 fiddle以使用 oracle jet 为例。

如您所见，我添加了您的按钮和 CSS。在那里我遇到了同样的问题，没有图像。即使在评论中列出的 css 更改之后。

根据 oracle 示例 的更改，我在按钮内添加了一个 span 并添加了此 css:

.chatButton span{
  height:60%;
  content: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png');
}

fiddle