У меня есть одно изображение для использования в качестве фона, а затем у меня есть разные сообщения для показа на этих «карточках».
Мне нужно сделать так, чтобы и текст, и изображение загружались как один файл.
Это образец моего кода:
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div class="centered">Overlay text</div>
</div>
Я видел, что есть способ сделать скриншот определенного элемента в DOM, выполнив следующие действия:
- Проверьте элемент, который вы хотите захватить.
- Откройте командное меню с помощью Cmd + Shift + P / Ctrl + Shift + P.
- Введите скриншот.
- Вы можетеТеперь сделайте снимок экрана только определенного элемента, снимка окна просмотра или снимка экрана на всю страницу.
В моем случае у меня есть много элементов .container с собственным наложенным текстом, и я хотел быразрешить пользователям загружать элемент .container DOM как одно изображение.
Как и предположил @ Abhay-Sehgal, я мог бы показать их как независимые изображения, а затем, когда пользователь сохранит страницу, у него будет HTML-код ипапка в комплекте со всеми изображениями там.Но чтобы перейти к этому шагу, мне нужно сгенерировать эти образы элемента DOM, в который встроен текст.
Есть ли способ программно делать скриншоты элементов DOM из консоли?
(или даже просто запустив некоторый ванильный код JavaScript вместо того, чтобы просматривать пользовательский интерфейс браузера)