Как поместить текст на картинку css
Перейти к содержимому

Как поместить текст на картинку css

  • автор:

Текст поверх картинки

Кроме как с двумя дивами(один с бэкграунд картинкой, второй просто сдвигается относительно первого с помощью CSS) есть какие-нить идеи, как поместить текст поверх картинки ?

phasma ★☆
14.04.08 16:54:43 MSD

> как поместить текст поверх картинки ?

anonymous
( 14.04.08 16:58:50 MSD )
Ответ на: комментарий от anonymous 14.04.08 16:58:50 MSD

image magick прикрутили к CSS ?

phasma ★☆
( 14.04.08 17:01:02 MSD ) автор топика

намалевать текст на картинке гимпом?

mirage
( 14.04.08 17:04:31 MSD )

А чем этот вариант не устраивает, можно поинтересоваться? По мне, так нормальное решение. И работать везде будет

it-partizan ★
( 14.04.08 17:11:47 MSD )

Вариант с одним дивом (или таблицей/параграфом/etc), Картинка в бэкграунде, css или обычном (если quirks пофиг или неXHTML) (при желании двигается до нужной позиции).

x3al ★★★★★
( 14.04.08 17:34:32 MSD )
Ответ на: комментарий от it-partizan 14.04.08 17:11:47 MSD

> А чем этот вариант не устраивает, можно поинтересоваться? По мне, так нормальное решение. И работать везде будет

в разных браузерах разъезжается, текст часто получается шире картинки )

> Вариант с одним дивом (или таблицей/параграфом/etc), Картинка в бэкграунде, css или обычном (если quirks пофиг или неXHTML) (при желании двигается до нужной позиции).

один див с бэкграундом не подходит, картинке ширину нужно указать в процентах .

phasma ★☆
( 14.04.08 17:52:37 MSD ) автор топика
Ответ на: комментарий от phasma 14.04.08 17:52:37 MSD

блин, ну ты бы шот показал и набросок кода, что ты на пальцах-то…

Как поместить текст на картинку css

Допустим, вам нужно сверстать этаж‑плашку с изображением на фоне, с заголовком и текстом внутри.

Есть несколько распространённых ошибок при вёрстке таких этажей:

Отступы ставятся у внутренних элементов плашки, вместо внутренних отступов у самой плашки.
Фон изображения ставится элементом img , вместо фона плашки.

Возьмём этаж из совета про обёртку для страницы и немного изменим его:

ХТМЛ ‑код такого этажа предельно прост, здесь не нужно ничего изобретать:

Межпланетный диабаз: основные моменты

Рейтинг притягивает онтогенез речи, независимо от психического состояния пациента. Аффинное преобразование, например, дает осциллятор. Сверхпроводник отталкивает погранслой.

Стилизуем плашку. Внутренние поля плашки — свойство плашки, поэтому их нужно задавать здесь же, а не у внутренних элементов:

.banner

Мы не задаём никаких ограничений размеров плашки, кроме минимальной высоты. Ширина — ответственность обёртки страницы, а высота может плавать, в зависимости от содержимого. Если у вас на плашке железобетонно зафиксированный текст, а плашка должна быть какой‑то определённой высоты, то можно задать.

Добавим изображение как фон плашки:

.banner < min-height: 390px; padding: 50px 50px 100px 30px; border-radius: 20px; color: #fff; background-color: #cacaca; // цвет фона background-image: url("/src/images/splash.jpg"); // путь к изображению background-repeat: no-repeat; // не повторять изображение ни по горизонтали, ни по вертикали background-position: 50% 100%; // расположить изображение по центру и прижать к низу элемента background-size: cover; // вписать изображение в контейнер, чтобы не было зазоров >
.banner < min-height: 390px; padding: 50px 50px 100px 30px; border-radius: 20px; color: #fff; background: #cacaca url("/src/images/splash.jpg") no-repeat 50% 100% / cover; >

Содержимое плашки может быть каким угодно и это никак не должно влиять на плашку, кроме изменения высоты. Поэтому добавим условные стили, которые подойдут под наш макет:

h1 < max-width: 740px; margin: 0 0 40px; font-size: 48px; line-height: 50px; font-weight: normal; >

p

Вот и всё. Результат на Кодсендбоксе.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Как сделать чтобы при hover на картинку она затемнялась и появлялся текст внутри нее?

Весь интернет перерыл не нашел ничего толкового. Смысл прост: при наведении мышью на картинку она должна затемняться чуть-чуть. и внутри блока-картинки появлялся текст. Прошу помочь.

1 ответ

07 октября 2014 года
3.5K / / 15.06.2005

В блок поместить блок, где картинка фоном, а над ним ещё блок с текстом и чёрным фоном прозрачный. При наведении на него opacity: 50%. Разумеется блок-контейнер должен быть position absolute или relative, внутренние блоки absolute.

UPD. Вот, набросал на скорую руку.

Свойство content

С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after , но не менее важную роль в этом играет свойство content .

Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content . Достаточно такой строки:

content: "";

Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:

DIV:before  content: "\2603"; >

Возможные значения свойства:

normal , none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.

— текстовый контент. Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.

DIV:before  content: "Hello"; >
DIV:before  content: url(//img-fotki.yandex.ru/get/5413/5091629.67/0_5ba12_81d03a82_XS.png); >

Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, буллеты списков.

Правда, тут появляется проблема лишних запросов к серверу.

  • спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
    Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
  • закодировать отдельные картинки в base-64 и вставлять через content: url() ;
  • закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

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

Закодировать картинку в base64 можно с помощью онлайн-сервисов. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64 .

Вот так будет выглядеть код для иконки Instagram:

[href*="instagram.com"]:before  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODA4Mzk4RDI3RDIwODg4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjAxNEU1NjQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjAxNEU1NTQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3MDc3Njg4MTUyMDY4MTE4MDgzOThEMjdEMjA4ODgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4MDgzOThEMjdEMjA4ODgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++UbndwAAArdJREFUeNqUk0tME1EUhr+ZDoW2tBS0vLQCkqgLE4X4DBoBFxIXBqNCQI0rF8TEhS5MNC4MLkxcGRb4jonxFVApKBJNZCG+giJddAEoUEEWAikI9t2OMxeKJLrhZE7mPv7vv3fmniud2lN0EKjTspylxWstGxVVVU+szywoNRFkcHMa7nAxiqEYJjo5vtLwX1JjGBkZLXf3fJEVSZJKDcEwUSlELBIiHAkTisYxBkP4ff5/4BPX28X70pFydFbRO9FIBEWJEY/HialxpKkh+NFP0+CMEGdazazJyiDLZsFss6NqY+FAUMwJg0g4jCLFtb3FUIb7yQp+Zn/tYXz+KMHfs+QsT+Pp4wc4fk5SX7lJgNOTE3MGssXIwO9pCECwM0Ce00pZ5TFOnbuIxWpjwjeprTbL5frzdHe94nV3LynaQnrorJLqsLKv7igGay5Njx5SuruCutMXKCutITcnh9Rlybzpc3O24SZ3Lp7hZXsL1TW1xGbGaG2+i6wYZBwZNpwrsvF6h/H0DeFcvY5u93s8X0doedeLkreW6YAk5rxer9DqjM4q8wcjjkZ7SLXbGR8fIxhSCclx+j99YSZ7Pct2HSLZZNbPUGgRv3L+J4q2Npi/yklBpo3v3zyoRgujz64ip6Tz7cVtMvIzKdx7gOH8PKGd55EThaHn9i2baWtzcf/GFaKzPuQkI/6JAZga5NbJI7S6ngiNurAL/n6CnhuKNuLxeGhtacJ1twGf7xfJaQ7Mcpjme9cozHMKTUK/yGAujCkpVFVX8eFtF89dLYz7psS4I91OWclWtpXsEJrFIQzUWAQ1HkOWDVhsNnaWlVNUXEzAP1fKJrOZ1DS7gLXyFVqdSRh0DPX1VBRoDcmQtOBs0u6RyZro+YnN+tHqicSCGqM3O3SDxq6PbrSsWOJ17tDZPwIMAKAIId5/sWegAAAAAElFTkSuQmCC) >

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

Подобным же образом можно вставлять SVG.

DIV:before content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h19.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" /></svg>'); >

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

— счетчик. С помощью этого значения можно пронумеровать не только списки, но и любые элементы на странице. Например, разделы статьи.

BODY  counter-reset: h2-counter; counter-reset: p-counter; > DIV  counter-increment: h2-counter; > H2:before  content: counter(h2-counter) ". "; > P:before  content: counter(p-counter) ". "; counter-increment: p-counter; >

counter-reset задает имя счетчика.

counter-increment увеличивает значение заданного счетчика.

content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

attr() — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.

A:before  content: attr(title); >

open-quote , close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes . Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

BLOCKQUOTE  quotes: '"' '"' "'" "'"; > BLOCKQUOTE:before  content: open-quote; > BLOCKQUOTE:after  content: close-quote; >

no-open-quote , no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.

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

Показать комментарии

Сайдбар

Статьи

  • Математические функции в CSS
  • Адаптивное видео с помощью встроенных математических функций CSS
  • Недоступность в картинках
  • Единицы размеров в CSS
  • Генератор цветовых тем
  • Jekyll → Gatsby
  • Вариативные шрифты
  • Размеры в SVG
  • Адаптивный Pixel Perfect
  • Логотип не отвечает или временно недоступен
  • SVG-паттерны
  • Мыльные пузыри на SVG
  • SVG-градиенты
  • Весёлая консолька
  • SVG-маски
  • Умная прокрутка со Scroll Snap Points
  • CSS-анимации для ротации изображений
  • Анимированные SVG-маски
  • Странности обводки в SVG
  • SVG-прелоадеры
  • Анимируем градиенты ещё раз
  • Background-blend-mode
  • Возможности оформления SVG
  • CSS и SVG маски
  • Nth-child и nth-of-type
  • SVG-иконки
  • SVG: заливка и обводка
  • SVG-path
  • SVG: группировка и переиспользование элементов
  • SVG-фигуры и трансформации
  • SVG
  • СSS-градиенты и 3D
  • Рисовалка анимированных теней
  • Свежие CSS-паттерны
  • CSS-паттерны
  • Радиальные градиенты
  • Линейные градиенты
  • Крестики-нолики на CSS
  • Border-image
  • Электронные часы на CSS и JS.
  • Сколько весят селекторы?
  • Символы юникода
  • Свойство content
  • Анимируем CSS-градиенты
  • Текстовые эффекты
  • Древовидный список на CSS
  • Css-селекторы, часть 2
  • Css-селекторы
  • Контекст наложения
  • Два способа «прошить» элемент по краю
  • Box-sizing
  • Цвета в CSS
  • Фон под строчками: добавляем поля
  • Box-shadow
  • Css-фигуры: лепесток
  • Transform
  • Css Animation
  • 3D-куб
  • Border-radius
  • First letter
  • Эти глаза напротив
  • CSS-фигуры
  • Стрелки с помощью свойства border
  • Flexbox

Страницы

  • SVG: полезные ссылки
  • CSS-селекторы одной таблицей
  • Таблица именованных цветов
  • Функции Transform
  • Свойства Transform
  • Свойства Animation одной таблицей
  • Разный синтаксис Flexbox
  • Свойства Flexbox одной таблицей

Проекты

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *