19:07 Фоновые изображения с помощью CSS |
| Поскольку изображения используются скорее как элемент представления, чем как реальный контент, в большинстве случаев они обрабатываются с помощью CSS. Элемент "img" раньше использовался для выполнения всевозможных функций, связанных с изображениями, но сегодня эта проблема решена благодаря тому, что CSS позволяет работать с изображениями с помощью свойства "background-image", что делает его более соответствующим существующим стандартам.  Свойство background-image можно использовать для указания изображения, которое будет использоваться в качестве фона для любого элемента слоя, от тела страницы до отдельного абзаца. Используя его, мы заполним элемент изображением, которое будет идти от левого верхнего угла до конца, покрывая все пространство и с возможностью добавления других элементов поверх изображения. Код body { background-image: url(imagenes/webera.jpg); } Мы можем управлять аспектами фонового изображения с помощью других свойств CSS, таких как background-attachment, background-repeat и background-position. Свойство background-attachment определяет, будет ли фоновое изображение прокручиваться вместе с содержимым поля. С его помощью можно указать, будет ли изображение прокручиваться вместе с остальной частью страницы или же оно должно быть прикреплено к виду, то есть к области отображения окна браузера, а не к странице. Код body { background-image: url(imagenes/webera.jpg); background-attachment: fixed; } В этом примере мы устанавливаем изображение "webera.jpg" в качестве фона страницы, и вместо того, чтобы следовать обычной схеме прокрутки, изображение будет выглядеть точно так же по мере прокрутки, единственное, что будет прокручиваться - это остальное содержимое страницы. Если используемое изображение слишком маленькое или вы просто не хотите, чтобы оно повторялось, создавая эффект мозаики, то нужно использовать свойство "background-repeat". Установка этого свойства в значение "no-repeat" избавит вас от необходимости отображать изображение несколько раз, оно просто будет показано один раз. Код body { background-image: url(imagenes/webera.jpg); background-repeat: no-repeat; } Это свойство также может иметь значения: “repeat-x” для повторения изображения только по горизонтали. "repeat-y", чтобы повторить то же самое, но по вертикали. Остальная часть области, не покрытая фоновым изображением, будет иметь прозрачный фон, который обычно выглядит белым, так как это выбранный шаблон для браузера, если мы не выберем цвет фона с помощью свойства "background-color", которое объединит два значения, показывая изображение, а в оставшейся области - выбранный цвет. Фоновые изображения по умолчанию всегда начинаются в левом верхнем углу, но если это не соответствует нашим требованиям, мы можем изменить это положение с помощью свойства "background-position", которое обычно используется в сочетании со свойством repeat. Значения, которые принимает это свойство, являются классическими для определения позиции, мы указываем “top”, “right”, “bottom”, “left”, “center”, некоторую меру или процент, или даже комбинацию любого из этих значений. Код body { background-image: url(imagenes/webera.jpg); background-repeat: no-repeat; background-position: center; } Наконец, у нас есть уже известные сокращения или также известные как shortcuts, то есть свойство, которое поможет нам представить все эти свойства в одной строке, в данном случае оно называется "background" и поможет нам определить значения background-colour, background-image, background-repeat, background-attachment и background-position. Код body { background: #CCCCCC url(imagenes/webera.jpg) center fixed no-repeat; } Хотя в примерах в этой статье мы использовали элемент "body", имейте в виду, что эти свойства могут быть применены к любому видимому элементу на странице, абзацу, таблице, div и т.д. |
|
|
| Всего комментариев: 0 | |