Фоновое изображение кнопки CSS не отображается - PullRequest
Новая
       72

Фоновое изображение кнопки CSS не отображается

0 голосов
/ 13 ноября 2018

Я перепробовал несколько источников в Интернете и в итоге соединил много вещей. Я лично знаю, как они работают, но не уверен, что я здесь не так делаю.

Мой 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 и использую обычную кнопку, я не могу отобразить фоновое изображение.

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

, если вы хотите установить все свойства фона в одну строку, вы должны использовать background, а не background-image. 

background: url('https://freeiconshop.com/wp-content/uploads/edd/chat-outline.png') no-repeat center center fixed;
0 голосов
/ 13 ноября 2018

Так что я новичок в oracle jet, но вот что я нашел:

Есть некоторые проблемы с использованием свойств background-image.

Вот некоторые Примеры из оракула :

Я нашел скрипку с примером, где используется oracle jet.

Как вы видите, я добавил вашу кнопку и CSS. Там у меня были такие же проблемы без изображения. Даже после изменения CSS, как указано в комментариях.

С изменениями из oracle example я добавил span внутри кнопки и добавил этот css: 

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

1024 * скрипка *

...