Каким образом можно реализовать такую штуку?

Question

[Overlord934]

Нужно чтоб текст (по середине) шел как бы в паре с картинкой фона. Чтобы при уменьшении или увеличении оно выглядело одинаково. Как такое можно реализовать?

Comments

[Максим]

На svg к примеру
Или канвас ...

[Overlord934]

Максим, немножко не понял. Всмысле текст делать svg картинкой вместе с фоном?

[Ankhena]

Как такое можно реализовать?

Использовать пропорции и относительные единицы измерения.

Аналоги:
https://codepen.io/AnnaSummer/pen/QWQOvzy
https://codepen.io/AnnaSummer/pen/eYVeWXR

[Максим]

Overlord934, да верно, можно вставить хоть кодом в html хоть тегом img, щас посмотрел с компа лучше всё таки изображением в png

[Ankhena]

Overlord934,

Всмысле текст делать svg картинкой вместе с фоном?

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

[Overlord934]

Ankhena, В данном случае считаю, что не получится сделать текст картинкой т.к. это заголовок сайта и текст нужен для поиска по названию сайта. И исходя из этого вопрос, можно ли такое вообще реализовать только средствами css и html? Как допустим стилизовать отдельно букву O, чтоб она была как бы элементом объектива на фоновом изображении( на картинке в описании видно)?

[Ankhena]

Overlord934, Вообще, то, что нарисовано - это логотип.
Его можно вставить и в стили, потому что уже есть лого в шапке.
Можно и как img. От читалок, скорее всё таки скрыть, опять таки и потому что уже есть в хедере и потому что вы хотите к нему норм текст.

Если к этому ещё нужен и текст, то visually-hidden в помощь (легко гуглится). Например, для h1.

[Overlord934]

Ankhena, т.е можно использовать тег h1 с текстом и просто скрыть его видимость и тогда с точки зрения семантики это будет верно? Я правильно понял?

[Ankhena]

Overlord934, доступно скрыть. С помощью одного из паттернов visually-hidden

[Overlord934]

Ankhena, Понял, благодарю за ответ