Если ты разработка веб-сайта, вам может быть интересно узнать, как создать фиксированное фоновое изображение или водяной знак на веб-странице. Это обычная дизайнерская обработка, которая довольно давно популярна в Интернете. Это удобный эффект, который можно добавить в свой набор хитростей веб-дизайна.
Если вы не делали этого раньше или пробовали ранее, но безуспешно, процесс может показаться устрашающим, но на самом деле это совсем не сложно. С помощью этого краткого руководства вы получите информацию, необходимую для изучения техники, за считанные минуты с использованием CSS.
Начиная
Фоновые изображения или водяные знаки (которые на самом деле являются просто очень светлыми фоновыми изображениями) имеют свою историю в печатном дизайне. Документы уже давно содержат водяные знаки, чтобы предотвратить их копирование. Кроме того, во многих листовках и брошюрах большие фоновые изображения используются как часть дизайна печатной продукции. Веб-дизайн давно заимствовал стили из печати, и фоновые изображения являются одним из этих заимствованных стилей.
Эти большие фоновые изображения легко создать, используя следующие три CSS стиль характеристики:
- фоновая картинка
- фон-повтор
- фоновая привязка
- размер фона
Фоновая картинка
Вы будете использовать background-image, чтобы определить изображение, которое будет использоваться в качестве водяного знака. Этот стиль просто использует путь к файлу для загрузки изображения, которое у вас есть на вашем сайте, вероятно, в каталоге с именем изображений.
фоновое изображение: URL (/images/page-background.jpg);
Важно, чтобы само изображение было светлее или прозрачнее обычного. Это создаст то "водяной знак"вид, при котором полупрозрачное изображение скрывается за текстом, графикой и другими основными элементами веб-страницы. Без этого шага фоновое изображение будет конкурировать с информацией на вашей странице и затруднить чтение.
Вы можете настроить фоновое изображение в любой программе редактирования, например Adobe Photoshop.
Фон-повтор
Далее следует свойство background-repeat. Если вы хотите, чтобы ваше изображение было большой графикой в стиле водяного знака, вы должны использовать это свойство, чтобы изображение отображалось только один раз.
фон-повтор: без повторения;
Без нет повторения свойство, по умолчанию изображение будет повторяться на странице снова и снова. Это нежелательно в большинстве современных дизайнов веб-страниц, поэтому этот стиль следует считать важным в вашем CSS.
Фон-вложение
Фоновое прикрепление - это свойство, о котором многие веб-дизайнеры забывают. При его использовании фоновое изображение остается на месте, когда вы используете фиксированный имущество. Это то, что превращает это изображение в водяной знак, закрепленный на странице.
Значение по умолчанию для этого свойства - прокрутка. Если вы не укажете значение прикрепления фона, фон будет прокручиваться вместе с остальной частью страницы.
background-attachment: исправлено;
Размер фона
Размер фона - это новое свойство CSS. Он позволяет вам установить размер фона в зависимости от области просмотра, в которой он просматривается. Это очень полезно для отзывчивые веб-сайты которые будут отображаться в разных размерах на разных устройствах.
размер фона: обложка;
Два полезных значения, которые вы можете использовать для этого свойства, включают:
- Покрытие - Масштабирует фон так, чтобы отображалась либо полная ширина, либо полная высота. Это означает, что некоторые части изображения могут не отображаться на экране, но вся область будет покрыта.
- Содержать - Масштабирует изображение таким образом, чтобы в стилизуемой области отображалась вся ширина и высота. Изображение не обрезается, но недостатком является то, что часть области может не быть покрыта изображением.
Добавление CSS на вашу страницу
После того, как вы поймете указанные выше свойства и их значения, вы можете добавить эти стили на свой веб-сайт.
Добавьте следующее в ЗАГОЛОВОК своей веб-страницы, если вы делаете одностраничный сайт. Добавьте его в стили CSS внешней таблицы стилей, если вы создаете многостраничный сайт и хотите воспользоваться преимуществами внешней таблицы.
Измените URL-адрес вашего фонового изображения, чтобы он соответствовал конкретному имени файла и пути к файлу, которые имеют отношение к вашему сайту. Внесите любые другие соответствующие изменения, чтобы они соответствовали вашему дизайну, и у вас будет водяной знак.
Вы тоже можете указать позицию
Если вы хотите разместить водяной знак в определенном месте на своей веб-странице, вы также можете это сделать. Например, вам может понадобиться водяной знак в середине страницы или, возможно, в нижнем углу, а не в верхнем углу, который используется по умолчанию.
Для этого добавьте в свой стиль свойство background-position. Это поместит изображение в то место, где вы хотите, чтобы оно появилось. Вы можете использовать значения пикселей, проценты или выравнивания для достижения этого эффекта позиционирования.
background-position: center;