Компьютерная помощь в г. Унеча Закажи себе баннер на сайт

Создание фонового водяного знака на CSS

+ -
0

водяной знак Выполнить технику с помощью CSS

Если вы разрабатываете веб-сайт, вам может быть интересно узнать, как создать фиксированное фоновое изображение или водяной знак на веб-странице. Это обычное дизайнерское лечение, которое довольно популярно в Интернете в течение некоторого времени. Это удобный эффект, чтобы иметь в вашем веб-дизайне сумку трюков.

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

Начинём

Фоновые изображения или водяные знаки (которые на самом деле просто очень легкие фоновые изображения) имеют историю в печатном дизайне. Документы в течение длительного времени включали в себя водяные знаки, чтобы предотвратить их копирование. Кроме того, многие листовки и брошюры используют большие фоновые изображения в качестве части дизайна для печатной части. Веб-дизайн давно заимствовал стили из печати, а фоновые изображения - один из этих заимствованных стилей.

Эти большие фоновые изображения легко создавать с использованием следующих трех свойств стиля CSS:

  • background-image
  • background-repeat
  • background-attachment
  • background-size

Background-Image

Вы будете использовать фоновое изображение для определения изображения, которое будет использоваться в качестве водяного знака. Этот стиль просто использует путь к файлу для загрузки изображения, которое у вас есть на вашем сайте, вероятно, в каталоге с именем «image».

background-image: url (/images/page-background.jpg);

Важно, чтобы изображение было легче или прозрачнее обычного изображения. Это создаст этот «водяной знак», в котором полупрозрачный образ лежит за текстом, графикой и другими основными элементами веб-страницы. Без этого шага фоновое изображение будет конкурировать с информацией на вашей странице и затруднить ее чтение.

Вы можете настроить фоновое изображение в любой программе редактирования, такой как Adobe Photoshop.

Background-Repeat

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

background-repeat: no-repeat;

Без свойства «no-repeat» значение по умолчанию заключается в том, что изображение будет повторяться снова и снова на странице. Это нежелательно в большинстве современных веб-страниц, поэтому этот стиль следует считать существенным в вашем CSS.

 Background-Attachment

Фоновая привязка - это свойство, о котором забывают многие веб-дизайнеры. Используя это, ваше фоновое изображение фиксируется на месте, когда вы используете свойство «fixed». Это то, что превращает это изображение в водяной знак, который фиксируется на странице.

Значением по умолчанию для этого свойства является «scroll». Если вы не укажете значение фонового привязки, фон будет прокручиваться вместе с остальной частью страницы.

background-attachment: fixed;

Background-Size

background -size - это новое свойство CSS. Он позволяет установить размер фона на основе просмотра, на котором он просматривается. Это очень полезно для быстро реагирующих веб-сайтов, которые будут отображаться на разных устройствах разных размеров.

background-size: cover;

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

Cover- масштабирует фон так, чтобы отображалась полная ширина или полная высота. Это означает, что некоторые части изображения могут не отображаться на экране, но что вся область будет покрыта.

Contain - масштабирует изображение так, чтобы отображалась вся ширина и высота в области. Изображение не отрезано, но недостатком является то, что части области могут не покрываться изображением.

Добавляем CSS на вашу страницу

После того, как вы поймете вышеуказанные свойства и их ценности, вы можете добавить эти стили на свой сайт.

Добавьте следующее в HEAD своей веб-страницы, если вы создаете сайт на одной странице. Добавьте его в стили CSS внешней таблицы стилей, если вы строите многостраничный сайт и хотите воспользоваться преимуществами внешнего листа.

<style>
<!--
body {
background-image: url(/images/page-background.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
//-->
</style>

Измените URL-адрес своего фонового изображения, чтобы он соответствовал конкретному имени файла и пути к файлу, имеющему отношение к вашему сайту. Внесите любые другие соответствующие изменения в соответствии с вашим дизайном, и у вас будет водяной знак.

Вы можете указать позицию

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

Для этого добавьте свойство background-position в свой стиль. Это поместит изображение в точное место, которое вы хотите, чтобы оно появилось. Вы можете использовать пиксельные значения, проценты или выравнивания для достижения эффекта позиционирования.

background-position: center;

Просьба Автора
HTML-cсылка:

BB-cсылка:

Прямая ссылка:

Похожие новости

Добавить комментарий

Автору будет очень приятно узнать ваше мнение о своей новости.



Комментариев 0