Задать вопрос
redfieldone
@redfieldone
Старый , лысый и без денег.

Реально ли тег превратить в css background?

Вопрос наверное тупейший , простите. Задался им вчера.

Например : В CMS-ке вы выводим новость в определенный блок , картинка у нас определенным полем и выводится ествественно тегом img. Как вариант можно с помощью JQ вытянуть тег и переместить его в родительский блок, а далее путем манипуляций с абсолютным позиционированием можно растянуть и з-индексом поставить на задний план.

А вот можно ли как то взять этот тег img и скрыть его, а сам путь к картинке взять с помощью jq или чистого js и в реальном времени добавлять его как параметр background: url () в нужном селекторе ?

Спасибо большое, надеюсь внятно обьясниь, а то зная зная себя я могу иногда нести такие что только сам это и пойму =)
  • Вопрос задан
  • 2333 просмотра
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 4
ms-dred
@ms-dred
Вечно что то не то и что то не так...
Цель, смысл объясните действия. Картинку хотите что бы никто не скачал (путь не определил)?
Ответ написан
@IoannGrozny
Front-end разработчик
А что у вас за CMS? Если я правильно понял задачу, то проще сразу url картинки класть не в тег img, а в атрибут style необходимого блока. Т.е. прям в шаблоне выводить:
Неверно:
<div class='news-item'>
    <img src={url} />
    <!-- тело новости -->
</div>
Верно
<div class='news-item' style='background-image: url("' + {url} +'");'>
    <!-- тело новости -->
</div>

Также, для управления позиционированием изображения(не бэкграунда), есть неплохое css свойство object-fit:
https://developer.mozilla.org/en-US/docs/Web/CSS/o...
И полифилл к нему(поддержка IE9+):
https://github.com/anselmh/object-fit
Ответ написан
Комментировать
seoperin
@seoperin
Full stack web developer. Laravel / Vue
Какая CMS? Во многих можно получить именно путь миниатюры а дальше уже вставить в бэкграунд
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
22 дек. 2024, в 14:07
15000 руб./за проект
22 дек. 2024, в 13:01
50000 руб./за проект
22 дек. 2024, в 10:44
15000 руб./за проект