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 example的更改，我在按钮内添加了span并添加了此CSS：

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

fiddle

Answer 2

如果要在一行中设置背景的所有属性，则应使用background，而不要使用background-image。

background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;

CSS Button背景图片未显示

2 个答案: