URL-адрес фонового изображения CSS
Нет ответа на этот вопрос. Будьте первыми, кто откликнется.
Ваш ответ
Связанные вопросы в CSS
Используйте либо полупрозрачный PNG, либо SVG… ПОДРОБНЕЕ
ответил 27 мая в CSS по Эдурека • 9,540 баллов • 61 просмотр
- HTML
- CSS
- непрозрачность
Граница атрибута может использоваться как … ПОДРОБНЕЕ
ответил 10 июня в CSS по Эдурека • 9 540 баллов • 98 просмотров
Вы можете изменить фоновое изображение div … ПОДРОБНЕЕ
ответил 10 июня в CSS по Эдурека • 9 540 баллов • 175 просмотров
- HTML
- CSS
- изображение
- фоновое изображение
Если вам нужна только настольная версия … ПОДРОБНЕЕ
ответил 17 июня в CSS по Эдурека • 9,540 баллов • 156 просмотров
- CSS
- мобильное сафари
- фоновое изображение
- медиа-запросы
В чем разница между градиентами CSS.
.. ПОДРОБНЕЕ
22 июня в CSS по Эдурека • 11 040 баллов • 39 просмотров
- HTML
- CSS
Если выбрана эта панель, панель … ПОДРОБНЕЕ
22 июня в CSS по Эдурека • 11 040 баллов • 55 просмотров
- CSS
- фон
- фоновое изображение
- цвет фона
Чтобы ответить на ваш вопрос, есть … ПОДРОБНЕЕ
ответил 8 фев на Яве по Сохам • 9 330 баллов • 734 просмотра
- JavaScript
- HTML
- CSS
- изображение
- визуализировать
SEO в лучшем случае является спекулятивным. Как правило, принято … ПОДРОБНЕЕ
ответил 11 марта в цифровом маркетинге по нариккадан • 30 080 баллов • 128 просмотров
- HTML
- CSS
- изображение
- сео
В каких ситуациях уместнее .
.. ПОДРОБНЕЕ
10 марта в цифровом маркетинге по Кичу • 19 040 баллов • 68 просмотров
- HTML
- изображение
- CSS
- фон-
Попробуйте построить четыре ящика, один на … ПОДРОБНЕЕ
ответил 28 мая в CSS по Эдурека • 9,540 баллов • 143 просмотра
- HTML
- CSS
- изображение
- Все категории
- Апач Кафка (84)
- Апач Спарк (596)
- Лазурный (131)
- Большие данные Hadoop (1907)
- Блокчейн (1673)
- С# (124)
- С++ (268)
- Консультирование по вопросам карьеры (1060)
- Облачные вычисления (3356)
- Кибербезопасность и этичный взлом (145)
- Аналитика данных (1266)
- База данных (853)
- Наука о данных (75)
- DevOps и Agile (3500)
- Цифровой маркетинг (111)
- События и актуальные темы (28)
- IoT (Интернет вещей) (387)
- Ява (1178)
- Котлин (3)
- Администрирование Linux (384)
- Машинное обучение (337)
- Микростратегия (6)
- PMP (423)
- Power BI (516)
- питон (3154)
- РПА (650)
- SalesForce (92)
- Селен (1569)
- Тестирование программного обеспечения (56)
- Таблица (608)
- Таленд (73)
- ТипСкрипт (124)
- Веб-разработка (2999)
- Спросите нас о чем угодно! (66)
- Другие (1274)
- Мобильная разработка (46)
Подпишитесь на нашу рассылку новостей и получайте персональные рекомендации.
Уже есть учетная запись? .
Классифицируйте значки ссылок с фоновыми изображениями CSS
Пропустите список категорий сообщений- Дизайн и разработка
Я ненавижу термин «веб 2.0». Я думаю, что крылатые фразы просты и лишены воображения, и называть недавний бум простых в использовании и привлекательных веб-сайтов «веб 2.0», кажется, удешевляет их. Звучит слишком модно.
Похоже, будет «веб 3.0», а «веб 2.0» устареет, как только он нам надоест. В этом старом Интернете есть много новых идей, и они будут появляться по мере того, как мы продолжаем сотрудничать и совершенствовать процесс распространения наших данных.
Инновация: отделить стиль от содержания
Одним из блестящих открытий последних лет в кодировании для Интернета стало отделение стиля от содержания. Прошли те времена, когда теги использовались для презентации, теперь мы используем CSS для создания стилей, которые легко заменяются и достаточно гибки для нашего пластикового Интернета.
Сегодня я собираюсь показать вам простой и привлекательный способ придать изюминку важным ссылкам, сохраняя при этом идеал разделения стиля и содержания.
Предоставление вашим значкам PDF класса
В нашей предыдущей версии домашней страницы Portent у нас были значки PDF рядом со ссылками на библиотечные архивы, чтобы люди знали, что они могут загружать версии в формате PDF. Они были составлены из отдельных изображений, размещенных рядом с текстовой ссылкой. Вот как выглядит код.
Формат PDF
Так в чем проблема?
1. Отделение стиля от содержания. Мы не пытаемся отобразить изображение значка PDF в качестве нашей основной цели. Цель состоит в том, чтобы помочь конечному пользователю распознать, что эта ссылка является ссылкой на pdf. Изображение, размещенное рядом со ссылкой, не имеет смыслового значения. Мы определенно можем упростить процесс и удалить этот презентационный элемент из нашего кода.
2. Масштабируемость. Что, если в будущем Adobe полностью изменит значок pdf (вполне разумное предположение!), и мы также захотим изменить его на нашей странице? Что, если мы решим, что вообще не хотим показывать значки? При использовании старого метода нам пришлось бы изменить каждый бит кода или перезаписать старое изображение. Что делать, если старое изображение отличается по размеру от нового? Затем вам нужно будет перейти к каждому отдельному тегу изображения и обновить высоту и ширину. Огромная боль.
3. Доступность. Что произойдет, если изображение не загрузится? Замещающий текст «формат pdf» отображается рядом с текстом «формат pdf». Насколько это сбивает с толку кого-то, скажем, с программой чтения с экрана?
Решение
Создайте класс CSS для ссылок в формате PDF. Таким образом, если мы когда-нибудь захотим сделать ссылку на PDF-файл где-либо еще на веб-странице, нам не нужно помнить, в какую папку мы поместили изображение в формате PDF или какой код использовать, мы можем просто добавить 
Вот как это сделать.
Сначала создайте свой класс в таблице стилей. Затем добавьте изображение, которое хотите использовать в качестве фонового изображения. Я использую сокращение CSS здесь для упрощения.
.pdf {
background:url(images/pdf-icon.gif) по центру справа без повтора;
} Как добраться! Нам нужно добавить некоторые отступы, чтобы правильно отображать эту вещь, и немного кода, чтобы предотвратить ее неправильное обертывание.
.pdf { background:url(images/pdf-icon.gif) по центру справа без повтора; отступ: 0 16px 0 0; белое пространство: nowrap; }
Теперь, с этими несколькими строками кода, у нас есть элегантный стиль, который мы можем использовать для всего нашего веб-сайта, когда мы хотим обозначить ссылку в формате PDF. Просто обновите свои ссылки с помощью class="pdf" , и все готово. Мы даже избавились от этого грубого подчеркивания под изображением. Я называю это успехом.
Читать дальше
- Микроформаты
- Контекстное проектирование — A List Apart
Крис Фернисс — дизайнер, HTML-продюсер и гуру социальных сетей в Portent Interactive с 2006 года.
