[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Вывод картинок без тега <img>
Владимир55
На сайте ссылки выводятся в виде графического изображения, но в коде я не вижу тега <img>.

Очевидно, что вывод делается через CSS. Но как?
Эли4ка
background-image: url(images/bg.jpg); /* Путь к фоновому изображению */
VeRTak
Владимир55

background или background-image

Пример из сайта

<a href="/franchise/food" class="block-nav-item block-nav-item_food">

<p
class="block-nav-item__title">Франшизы питания</p>

<p
class="block-nav-item__count">293 франшизы</p>

</a>



.block-nav-item_food
{
background: url(/images/bg/drawn/1.png) 100% 50% no-repeat #f3f3f3;
}
.block-nav-item
{
width: 270px;
height: 180px;
background-color: #f3f3f3;
margin-bottom: 30px;
display: block;
padding: 30px
}
sergeiss
Владимир55, жмякаешь правой кнопкой над нужным элементом, выбираешь "Опции разработчика" (или что-то похожее, есть во всех браузерах) и смотришь, что там в CSS. Вот живой пример с данного сайта, из автоуслуг:
<a href="/franchise/electrotown-984" 
class="franchise-wide"
style="background: url(http://cdn.businessmens.ru/870x-/franchise_file/984/fb2d0adf29865be1c27ec03e4472c8bac90abc8a.jpg) center no-repeat; background-size: cover;">
...тут всякая лабуда, много её.....
</a>


Ну, разве что, лучше стили выносить в файлы, а не инлайновые делать :) А в остальном всё правильно у них.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
killer8080
Цитата (Владимир55 @ 18.03.2018 - 19:28)
Вывод картинок без тега <img>

а смысл в этом какой? Скрыть картинки от индексации?
FatCat
Цитата (killer8080 @ 20.03.2018 - 19:35)
смысл в этом какой?

Чтобы чайники не тырили правым кликом.

_____________
Бесплатному сыру в дырки не заглядывают...
killer8080
Цитата (FatCat @ 21.03.2018 - 01:27)
Чтобы чайники не тырили правым кликом.

чайники нынче продвинутые пошли, умеют гуглить и вопросы на форумах задавать, так что польза весьма сомнительна. Кому надо, тот стырит. А вот потеря индексации графического контента поисковиками, это уже реальный минус. smile.gif
AllesKlar
Цитата (killer8080 @ 20.03.2018 - 18:35)
а смысл в этом какой? Скрыть картинки от индексации?

Нет. Для того, чтобы на картинку наложить текст. Обычный. И отформатировать его нормально. Как текст.

В итоге имеем картинку в бекграунде
user posted image
И текст на ней
Франшизы питания
296 франшиз


_____________
[продано копирайтерам]
killer8080
Цитата (AllesKlar @ 22.03.2018 - 01:24)
Нет. Для того, чтобы на картинку наложить текст. Обычный. И отформатировать его нормально. Как текст.

вот оно что, а я то подумал человек ищет альтернативный способ графику выводить rolleyes.gif
а оказывается всё гораздо проще, кто то открыл для себя существование background-image cool.gif
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.