Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Помогите разобраться с кодом в html

Настя Ульянова Ученик (110), на голосовании 2 месяца назад
Как сделать такое в вс код, чтобы на картинку 1 ( с хлебом) как бы немного заступала картинка с текстом
По середине я их уже поставила, нужно только поднять картинку с текстом
Голосование за лучший ответ
Пудинг Сладок Гуру (2798) 3 месяца назад
ну вы хоть кусочек кода бы скинули, желательно css, что бы объяснить можно было
Оракул (50099) 3 месяца назад
 править
css
искать
padding
top
margin
V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (263830) 3 месяца назад
Блоки внутри других блоков позиционируются в абсолютных координатах относительно родительского.

https://codepen.io/VISTASTER/pen/xxoYQbO
Бинарный Балагур Гений (84504) 3 месяца назад
Чтобы создать эффект, когда блок с текстом немного заходит на изображение, можно использовать HTML и CSS. Вот пример кода, который поможет вам добиться этого эффекта:
  




Кондитерская Свити





Кондитерская Свити


Sample text. Click to select the Text Element.








Объяснение кода:

- `.background-image`: Этот блок содержит фоновое изображение. Используйте `background-image: url('your-image-url.jpg');` для указания пути к вашему изображению.

- `.text-box`: Этот блок содержит текст и кнопки. `position: absolute;` позволяет позиционировать его относительно `.background-image`. `transform: translate(-50%, -60%);` используется для центрирования и поднятия блока.

- `background-color: rgba(255, 255, 255, 0.9);`: Устанавливает полупрозрачный белый фон для текста, чтобы он был читаемым на фоне изображения.

Отрегулируйте значения `top`, `left`, и `transform`, чтобы добиться нужного вам эффекта.

Похожие вопросы