0

Создаю модальное окно, и добавил svg картинку в качестве крестика(закрытия модального окна), но оно не отображается. Вот код:

<div class="onlineUser">&#9776; Online list
    <div class = "modalWindowList" data-modal = "one">
        <div class = "modalBody">
            <div class = "closeButton"></div> // вот класс закрытия кнопки
            <div class ="onlineList"><span class = "textOnline">Online</span>
                <div class = "usersList"></div>
            </div>
        </div>
    </div>
</div>

.closeButton {
    position: absolute;
    background-image: url(../image/close.svg);
    margin-left: 20px;
}

Но если между div <div class = "closeButton">CLOSE</div> вставить что то, то они начинают отображаться очень мелко(как текстуру как будто натянули). В чем причина?

1 ответ 1

0

Возможно, причина в том что не задан размер и дивы просто схлопываются, так как background-image не влияет на размер div. Дополнительно к этому svg обычно нуждаются в указании размера так как это векторная графика.

.closeButton {
    position: absolute;
    background-image: url('https://www.svgrepo.com/show/151290/close.svg');
    margin-left: 20px;
    height: 20px;
    width: 20px;

}
<div class="onlineUser">&#9776; Online list
    <div class = "modalWindowList" data-modal = "one">
        <div class = "modalBody">
            <div class = "closeButton"></div>
            <div class ="onlineList"><span class = "textOnline">Online</span>
                <div class = "usersList"></div>
            </div>
        </div>
    </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.