Почему не отображается фоновое изображение кнопки?CSS

Разбираемся в CSS
Ответить
Anonymous
 Почему не отображается фоновое изображение кнопки?

Сообщение Anonymous »

Я пишу веб-сайт и столкнулся с одной проблемой. Я использовал «background-image» в CSS, но вместо изображения вижу серый квадрат. Это раздел вопросов и ответов. Вот структура HTML и код CSS (я заменил содержимое сайта другими словами, код тот же):
< div class="snippet-code">

Код: Выделить всё

.qa-background {
width: 900px;
background-color: white;
border-radius: 10px;
box-shadow: 2px 3px 5px 0 grey;
vertical-align: middle;
text-align: center;
z-index: 0;
padding: 40px 0 20px 0;
}

.question {
padding: 0;
background-color: white;
border-radius: 10px;
border: 2px solid #169149;
display: flex;
text-align: left;
justify-content: space-between;
padding: 5px 30px 5px 30px;
margin: 0 60px 10px 60px;
z-index: 1;
}

.question p {
color: black;
font-size: 20px;
}

.qa-arrow {
all: unset;
width: 30px;
height: 30px;
margin: 0;
background-image: url('assets/img/icons/qa-arrow.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: none;
cursor: pointer;
z-index: 2;
}

.qa-arrow:hover {
filter: brightness(1.3);
}

.qa-arrow:active {
transform: scale(0.95);
}

.answer {
background-color: white;
border-radius: 10px;
border: 1px solid #bababa;
text-align: left;
padding: 5px 80px 5px 30px;
display: block;
margin: 0 60px 30px 60px;
z-index: 1;
animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

Код: Выделить всё


Some really nice question[/b]
[b]    

Answer
[list]
[*]1
[*]2
[*]3
[*]4
[*]5
[*]6
[*]7
[/list]

Another amazing question[/b]


Answer
some content



Я проверил путь к файлу в HTML, и он правильный. Я также проверил связь моего HTML-файла с CSS-файлом, и это тоже правильно. Когда я оформляю другие элементы в документе, все работает отлично, кроме этого. Я попробовал «все: не установлено»; вариант, но теперь кнопка вообще не отображается, отображается только курсор. Может кто-нибудь помочь мне понять, в чем дело, пожалуйста? :)

Подробнее здесь: https://stackoverflow.com/questions/792 ... ot-showing
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»