2017-02-18 3 views
0

Вчера я делал HTML-элемент, и эта проблема поразила меня. Фоновый образ DIV не отображается, и мне было любопытно, что ссылка работала нормально.Фоновый рисунок не отображается

Вот мой код

<div id="floating-image-<?php echo $id; ?>" class="fl-<?php echo $id; ?>" style=" 
 
    background-image: url(https://images.pexels.com/photos/290470/pexels-photo-290470.jpeg?h=350&auto=compress&cs=tinysrgb); 
 
    margin-top: 20px; 
 
\t height: 200px; 
 
    width: 200px; 
 
    background-position: center center; 
 
\t background-repeat: no-repeat; 
 
\t transform: translateY(0px); 
 
    background-size: contain; 
 
\t position: relative; 
 
    margin-right: auto; 
 
\t margin-left: auto; 
 
    max-width: 80%; 
 
    display:block; 
 
    "></div>

EDIT ОК, я редактировал динамические коды и заменить их с некоторым статическим выходом. Извините за вводящую в заблуждение другой EDIT Я изменил имидж и теперь я использую меньшее изображение, но все-таки это не показывается

+0

Что такое '$ image' и как выглядит ваша файловая структура? Проверьте свою консоль, чтобы узнать, получаете ли вы ошибки. Здесь не так много другого. – Santi

+0

У вас есть ширина и высота на нем? Px? Если нет, вы создаете div без ширины, без высоты или с обоими, и, следовательно, ваше фоновое изображение появляется, только на div, который не отображается (поскольку ширина/высота равна 0) – Adam

+0

@Santi Я проверил мою консоль, но ничего не было в картинке –

ответ

0

Решение будет решаться только мной, так как оно включено в проект.

Спасибо за вашу помощь, и если бы я нашел настоящее решение, я отправлю его здесь.

EDIT

Ну, теперь я чувствую себя плохо, о впустую час в моей жизни.

В любом случае, я нашел решение, и речь шла о анимации. Я сделал эту функцию в своей теме, чтобы пользователь мог легко создавать анимации.

Весь рассказ выражается в нескольких словах: «Не разрешено анимацию в родительском разделе, поэтому нормальный код css идет как .class {OPACITY: 0;}".

Извините! и спасибо за вашу глубокую озабоченность в такой проблеме

+0

В будущем, узнав, как проверить свой элемент с помощью инструментов dev, вы сэкономили бы час. – Adam

0

Выпуск находится в образе, Вы использовали очень высокое качество изображения. , если вы используете изображение низкого качества, которое вы использовали в настоящее время, будет работать нормально.

1

Я проверил, фоновое изображение правильно работает. Размер изображения очень большой, около 7 МБ. Уменьшите его до 300 КБ, слишком большой, чтобы показать.

+0

Я изменил изображение с меньшим, но он не отображался –

+0

Хотя это, безусловно, хороший совет, чтобы не использовать 7MB-образ в качестве обратного изображения 200px квадратный div, этот факт сам по себе не помешает ему загрузить. – Adam

Смежные вопросы