Зазвичай веб-додатки мають приємне фонове зображення. Однак іноді корисно зробити веб-додаток більш компактним, щоб як інтерфейс користувача (UI), так і текст знаходилися на головній сторінці з приємним привітальним фоновим зображенням.
Зображення веб-додатка з водяним знаком та текстом.
У цьому пості пояснюються та демонструються водяні знаки для зображень та тексту за допомогою CSS.
ТЕКСТОВИЙ ВОДЯНИЙ ЗНАК
Це демонстрація використання CSS для створення водяного знака. Це демонстрація використання CSS для створення водяного знака. Це демонстрація використання CSS для створення водяного знака. Це демонстрація використання CSS для створення водяного знака. Це демонстрація використання CSS для створення водяного знака.
Введіть текст.
```
Зображення веб-додатка, що було відрендерено, показано вище.
## Основні властивості CSS для фону зображення водяного знака:
1. визначення ширини та висоти: якщо ширина та висота не задані, команда background-image не зможе завантажити зображення
2. background-image: виконує CORS запит для будь-якого URL!
3. визначення позиції як fixed: це дозволяє фоновому зображенню бути розташованим на сторінці з урахуванням значень top, bottom, right та left. Фіксована позиція розташовує HTML-елемент точно в тому місці, яке визначено для top, right, bottom та left у CSS. Відносна позиція розташовує HTML-елемент на сторінці відповідно до порядку, в якому задані HTML-елементи, а також у відношенні до фіксованих елементів. Відносна позиція означає, що HTML-елементи «плавно» переміщуються на сторінці щодо інших HTML-елементів [3].
4. визначення z-index як -1: це ставить фонове зображення на нижній «стек» відрендереного HTML-сторінки так, що текст (або HTML-елемент з позитивним z-index) буде над елементами з негативним z-index [4].
## Основні властивості CSS для текстового фону водяного знака:
1.
визначення font-size і color: font-size дозволяє контролювати розмір тексту, а color дає змогу контролювати колір тексту
2. визначення позиції як fixed: це дозволяє фоновому тексту бути розташованим на сторінці відносно top. У цьому випадку текст водяного знака розташовується під зображенням водяного знака з top = 500px.
3. визначення z-index як -1: це ставить фоновий текст на нижній «стек» відрендереного HTML-сторінки.
Успіхів і приємного практикування! 👋
💻 [GitHub](http://redirect.medium.systems/r-JYE34th87T) | 🔔 [Підписатися на Practicing Datscy @ Medium](http://redirect.medium.systems/r-bl0ayZaaWf) | 🌷 [Practicing Datscy @ Dev.to](http://redirect.medium.systems/r-QT4MaJe42A)
## Посилання
1. Натхненний блог-пост про водяні знаки: [https://medium.com/@frontendinterviewquestions/what-is-css-watermark-67a9a7359560](/@frontendinterviewquestions/what-is-css-watermark-67a9a7359560)
2. OpenAI gpt3.5 turbo
3. Позиція fixed проти relative MDN: [https://developer.mozilla.org/en-US/docs/Web/CSS/position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
4. Z-index MDN: [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index)
Перекладено з: [CSS Basics 0](https://medium.com/codex/css-basics-0-ca5896db9678)