Как текст наложить на картинку, чтобы текст ее фоном закрывал

@dmvlad19 · Регистрация: 17.10.2014

Студворк — интернет-сервис помощи студентам

Есть такой код http://jsfiddle.net/dmvlad19/jn4yrbk8/ но не получается сделать так, чтобы текст заголовка закрывал фоновую картинку и картинка начиналась с того места, где заголовок заканчивается.
Подскажите, это на css вообще реально или надо с таблицами мудрить?

@Lazy_Den · 17.10.2014, 21:16

Проверяем

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.title {
    width : 100%;
    height: 34px;
    white-space: nowrap;
    overflow: hidden;
}
.title::after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 34px;
    vertical-align: middle;
    background-image: url('http://www.chessdate.ru/img/vm1.gif');
}

@ElvenDragon · 17.10.2014, 21:17

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
H1 
 
{ 
font-size : 18px; 
text-decoration: none; 
font-family: Verdana, Tahoma, Sans-Serif; 
font-weight : normal; 
color : #000000; 
display: inline-block;
margin: 0;
}
 
img
{
    height : 34px;
    width : 50px;
    vertical-align: -6px;
}

HTML5
1
2
<h1 class="title">Title here</h1>
<img src="http://www.chessdate.ru/img/vm1.gif">

Вставляй.

@Давран · 17.10.2014, 21:20

dmvlad19,Напиши конкретней, что тебе нужно сделать. Не понял тебя

Сообщение от dmvlad19

чтобы текст заголовка закрывал фоновую картинку и картинка начиналась с того места, где заголовок заканчивается

что бы текст лежал над этими полосками и они виднелись только после последней буквы, так надо тебе?

@dmvlad19 · 17.10.2014, 21:34 **[ТС]**

Спасибо за пример, но не выходит - http://jsfiddle.net/dmvlad19/jn4yrbk8/9/
Наезжает полоска на правый блок

Нужно чтобы полоски справа шли до конца строки и начинались от конца заголовка
вот так

Добавлено через 3 минуты

@Lazy_Den · 17.10.2014, 21:43

Сообщение от dmvlad19

но не выходит

Начинаем играть в гадалку. Вариант номер раз. Вариант номер два-с. И при чем тут вообще таблицы? Для верстки они не годятся.

@dmvlad19 · 17.10.2014, 21:46 **[ТС]**

Спасибо! Первая версия - именно то, что было нужно!

@Academik · 18.10.2014, 02:49

dmvlad19, http://jsfiddle.net/jn4yrbk8/13/

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@dmvlad19 0 / 0 / 0 Регистрация: 17.10.2014 Сообщений: 5

	Как текст наложить на картинку, чтобы текст ее фоном закрывал 17.10.2014, 20:47. Показов 4651. Ответов 7 Метки нет (Все метки) Есть такой код http://jsfiddle.net/dmvlad19/jn4yrbk8/ но не получается сделать так, чтобы текст заголовка закрывал фоновую картинку и картинка начиналась с того места, где заголовок заканчивается. Подскажите, это на css вообще реально или надо с таблицами мудрить? 0

@dmvlad19 0 / 0 / 0 Регистрация: 17.10.2014 Сообщений: 5
	17.10.2014, 21:34 [ТС]
	Спасибо за пример, но не выходит - http://jsfiddle.net/dmvlad19/jn4yrbk8/9/ Наезжает полоска на правый блок Нужно чтобы полоски справа шли до конца строки и начинались от конца заголовка вот так Добавлено через 3 минуты Миниатюры 0

@dmvlad19 0 / 0 / 0 Регистрация: 17.10.2014 Сообщений: 5
	17.10.2014, 21:46 [ТС]
	Спасибо! Первая версия - именно то, что было нужно! 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	18.10.2014, 02:49
	dmvlad19, http://jsfiddle.net/jn4yrbk8/13/ 1

Как текст наложить на картинку, чтобы текст ее фоном закрывал

Решение