Выполнить технику с помощью CSS
Если вы разрабатываете веб-сайт, вам может быть интересно узнать, как создать фиксированное фоновое изображение или водяной знак на веб-странице. Это обычное дизайнерское решение, которое уже давно пользуется популярностью в сети. Это удобный эффект, чтобы иметь в своем веб-дизайне мешок с хитростями.
Если вы не делали этого раньше или пробовали ранее без удачи, процесс может показаться пугающим, но на самом деле это совсем не сложно. С помощью этого краткого руководства вы получите информацию, необходимую для овладения техникой за считанные минуты с использованием CSS.
Начиная
Фоновые изображения или водяные знаки (которые на самом деле просто очень светлые фоновые изображения) имеют историю в печатном дизайне. Документы уже давно содержат водяные знаки, чтобы предотвратить их копирование. Кроме того, многие листовки и брошюры используют большие фоновые изображения как часть дизайна печатного произведения. Веб-дизайн давно заимствовал стили печати, и фоновые изображения являются одним из этих заимствованных стилей.
Эти большие фоновые изображения легко создавать, используя следующие три свойства стиля CSS:
- изображение на заднем плане
- фон-повторить
- фон-вложение
- фон-размер
Изображение на заднем плане
Вы будете использовать background-image для определения изображения, которое будет использоваться в качестве водяного знака. Этот стиль просто использует путь к файлу для загрузки изображения, которое есть на вашем сайте, скорее всего, в каталоге с именем images .
background-image: url (/images/page-background.jpg);
Важно, чтобы само изображение было светлее или прозрачнее, чем обычное изображение. Это создаст тот «водяной знак», в котором полупрозрачное изображение находится за текстом, графикой и другими основными элементами веб-страницы. Без этого шага фоновое изображение будет конкурировать с информацией на вашей странице и затруднит ее чтение.
Вы можете настроить фоновое изображение в любой программе редактирования, такой как Adobe Photoshop.
Фон-Repeat
Свойство background-repeat будет следующим. Если вы хотите, чтобы ваше изображение представляло собой крупный рисунок в виде водяного знака, вы должны использовать это свойство, чтобы оно отображалось только один раз.
background-repeat: no-repeat;
Без свойства no-repeat по умолчанию изображение будет повторяться на странице снова и снова. Это нежелательно в большинстве современных дизайнов веб-страниц, поэтому этот стиль следует считать необходимым в вашем CSS.
Фон-Attachment
Background-attachment – это свойство, о котором забывают многие веб-дизайнеры. Его использование позволяет зафиксировать фоновое изображение на месте, когда вы используете свойство fixed . Это то, что превращает это изображение в водяной знак, который фиксируется на странице.
Значением по умолчанию для этого свойства является прокрутка . Если вы не укажете значение background-attachment, фон будет прокручиваться вместе с остальной частью страницы.
фоновое вложение: исправлено;
Фон-Size
Background-size – это более новое свойство CSS. Он позволяет вам установить размер фона на основе области просмотра, в которой он просматривается. Это очень полезно для адаптивных веб-сайтов, которые будут отображаться в разных размерах на разных устройствах.
Размер фона: обложка;
Два полезных значения, которые вы можете использовать для этого свойства:
- Cover – масштабирует фон так, чтобы отображалась либо полная ширина, либо полная высота. Это означает, что некоторые части изображения могут не отображаться на экране, но вся область будет покрыта.
- Содержать – масштабирует изображение таким образом, чтобы в области стиля отображались как вся ширина, так и высота. Изображение не обрезается, но недостатком является то, что части области могут не покрываться изображением.
Добавление CSS на вашу страницу
После того, как вы поймете вышеуказанные свойства и их значения, вы можете добавить эти стили на свой сайт.
Добавьте следующее в заголовок вашей веб-страницы, если вы делаете одностраничный сайт. Добавьте его в стили CSS внешней таблицы стилей, если вы создаете многостраничный сайт и хотите воспользоваться преимуществами внешней таблицы.
body {
background-image: url (/images/page-background.jpg);
background-repeat: no-repeat; < br /> background-attachment: fixed;
background-size: cover;
}
// ->
Измените URL вашего фонового изображения, чтобы оно соответствовало конкретному имени файла и пути к файлу, которые имеют отношение к вашему сайту. Сделайте любые другие соответствующие изменения, чтобы соответствовать вашему дизайну, и у вас будет водяной знак.
Вы также можете указать положение
Если вы хотите разместить водяной знак в определенном месте на вашей веб-странице, вы также можете сделать это. Например, вам может понадобиться водяной знак в середине страницы или, возможно, в нижнем углу, в отличие от верхнего угла, который используется по умолчанию.
Для этого добавьте свойство background-position в свой стиль. Это поместит изображение в то место, где вы хотели бы его видеть. Вы можете использовать значения пикселей, проценты или выравнивания для достижения этого эффекта позиционирования.
background-position: center;
