Как наложить картинку на текст html

      
Космоинфо
 
Погрузись в космос вместе с нами!
 
Новости Вопросы Основная

  

Отслеживать

ответ дан 14 фев 2018 в 4:22

user176262 user176262
Попробуй задать как фоновое изображение через CSS/SASS.
.image < background: url('image/image1.png'); width: 320px; height: 280px; //размер условный >
 
Текст Текст Текст
 
 
Отслеживать

6,641 6 6 золотых знаков 30 30 серебряных знаков 52 52 бронзовых знака

ответ дан 28 июл 2019 в 17:05

Анна Панина Анна Панина

21 1 1 бронзовый знак
Вариант 1, с использованием position: absolute
.container < position: relative; >.container img < position: absolute; >.container p
 
 
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, nulla?
 
Вариант 2, с использованием background-image (нужно знать размеры блока)
.bg < background: url('https://d626yq9e83zk1.cloudfront.net/files/2017/12/26-770x425.jpg') center center no-repeat; width: 300px; height: 300px; >.bg span
 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, rerum. 
Отслеживать

ответ дан 14 фев 2018 в 4:31

2,298 1 1 золотой знак 9 9 серебряных знаков 12 12 бронзовых знаков
* < margin: 0; padding: 0; box-sizing: border-box; >.wrapper < display: grid; gap: 10px; grid-template-columns: 1fr; >.container < display: grid; place-items: end center; >.container img < width: 100%; object-fit: cover; >.container p < position: absolute; font-size: 20px; color: #fff; margin: 10px 10px 20px; > 
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, fugiat. A, ipsum architecto sit nihil minus tenetur mollitia sequi est nostrum laudantium praesentium doloremque blanditiis recusandae, dolorum assumenda sed qui perspiciatis dolores? Quidem, itaque suscipit rerum, cupiditate delectus nesciunt dignissimos vel, odio corporis exercitationem facere nihil modi ducimus quas fugit.
 
 

Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
ответ дан 6 фев в 16:42
1 2 2 бронзовых знака

пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править

Наложить на картинку текст?

У меня есть блок, в самом его верху есть картинка. Так вот, как прямо на картинку наложить текст? Это через CSS походу только вот я не пойму как.

1 2 3 4 5 6 7 8 9 10 11

div id="sidebar"> img src="images/menusfon.png" width="234" height="35" /> p>a href="">Интернет/a>/p> p>a href="">Связь/a>/p> p>a href="">Технологии/a>/p> p>a href="">Безопасность/a>/p> p>a href="">Бизнес/a>/p> p>a href="">Софт/a>/p> p>a href="">Железо/a>/p> p>a href="">Гаджеты/a>/p> /div>

Вот CSS блока:

1 2 3 4 5 6 7 8

#sidebar { float: left; border: 1px solid #333; width: 234px; padding: 0px; margin: 5px 10px 10px 5px; }

Вот что получилось:

А вот тут где оранжевая рамочка нужно вставить текст:

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как текст наложить на картинку, чтобы текст ее фоном закрывал
Есть такой код http://jsfiddle.net/dmvlad19/jn4yrbk8/ но не получается сделать так, чтобы текст.

Как наложить на картинку прозрачный фон и текст?
вот css картинки .curved-hz-1 < position:relative; width: 700px; height: 130px;.

Не получается наложить картинку на картинку слоями
Здравствуйте не получается наложить картинку на картинку слоями вот мой случай <table.

632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632

В вашем случае лучше задать фон блоку без вставления картинки.
Наложить текст картинку,если так хочется можно так:
делаем контейнеру position:relative в который вставляем картинку а текст позиционируем абсолютом так ,чтобы текст был на картинкой .

Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
background-image
Регистрация: 05.10.2011
Сообщений: 495

1 2 3 4 5 6 7 8 9 10

div id="sidebar"> TRY TEXT ul> li>a href="">Интернет/a>/li> li>a href="">Интернет/a>/li> li>a href="">Интернет/a>/li> li>a href="">Интернет/a>/li> li>a href="">Интернет/a>/li> /ul> /div>

1 2 3 4 5 6 7 8 9 10

#sidebar { background-image:url(../images/menusfon.png); background-repeat:no-repeat; float: left; /* Обтекание справа */ border: 1px solid #333; /* Параметры рамки вокруг */ width: 261px; /* Ширина колонки */ padding: 0px; /* Поля вокруг текста */ margin: 5px 10px 10px 5px; /* Значения отступов */ }

CSS списка:

1 2 3 4

ul { margin-top:33px; }

Но как теперь позиционировать текст на картинке:
Регистрация: 05.10.2011
Сообщений: 495
Все! Проблема решена:

div id="DIVnavigation">span id="SPANnavigation">Навигация/span>/div>

вот так вот сделал, и подогнал как мне нужно.
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2

Чтобы текст отпозиционировать, нужно, чтобы было в чем его позиционировать, поэтому заключаем его в див

div id="text">TRY TEXT/div>

и позиционируем — по горизонтали выравниванием, по вертикали паддингом. Примерно так

1 2 3 4

#text { text-align: center; padding: 10px 0; }

Циферки под себя уже подгоните.

Добавлено через 28 секунд
Пока писала — уже сам решил. Молодец)

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

одну картинку наложить на другую
Добрый вечер, в заголовок вставляю картинку с градиентом, и сверху хочу наложить другую с городом.

Как наложить кнопку на картинку
я ввела код для создания картинки но все равно не могу сделать позицию как на картинке нужно.

Можно ли точно наложить картинку на такой же фон?
Есть две картинки img1 and img2 одного размера. 1) Можно ли задать каринке img1 фон=img2. 2).

Как наложить маленькую картинку поверх большой
На WordPress надо сделать что-то вроде подписи, чтобы поверх основной картинки в посте.

Как на картинку наложить текст в html

Для того чтобы наложить текст на изображение в HTML, можно использовать CSS свойство background-image для контейнера с текстом и установить значение background-color для контейнера, чтобы текст был читаемым. Например:

 class="image-container"> Текст наложенный на изображение  

.image-container  background-image: url('path/to/image.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); /* Значение rgba(0,0,0,0.5) задает полупрозрачный черный цвет фона */ > h1  color: white; font-size: 3em; text-align: center; > 

В данном примере для контейнера с классом image-container устанавливается фоновое изображение с помощью свойства background-image , а также устанавливаются размер фонового изображения, его позиция и повторение. Для того чтобы текст был читаемым, установлено полупрозрачное значение цвета фона с помощью функции rgba() . Контейнер также настроен с помощью свойства display: flex для выравнивания текста по центру. Заголовок h1 имеет белый цвет и центрируется внутри контейнера.

Как наложить картинку на текст, как стиль средствами CSS?

Возможно, вопрос тупой, но гуглением ничего не нашел.
Необходимо наложить картинку на текст, т.е. текст должен быть «маской». Я прекрасно понимаю, как это делается в фотошопе, но возможно ли это сделать средствами css/html?
Суть такая, что изображение ( «стиль» ) будет меняться, а переделывать все в ФШ не хочется.
Если это невозможно — напишите.

• Вопрос задан более трёх лет назад
• 4666 просмотров