КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

CSS и графика

---

Добавление рамки к изображению

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

Добавить рамку к изображению с помощью CSS предельно просто. Допустим, в документе на рис. 1 есть два изображения.

Рис. 1. Просмотр двух изображений в веб-броузере

Благодаря следующему правилу к обоим изображениям добавляется сплошная черная рамка толщиной в 1 пиксел:

img {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
}

Это правило можно записать в сокращенной форме, например:

img {
  border: 1px solid #000000;
}

На рис. 2. показан результат выполнения данного кода.

Рис. 2. С добавленной с помощью CSS рамкой изображение выглядит привлекательнее

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

css - файл (фрагмент)

.imgborder {
  border: 1px solid #000000;
}

html - файл (фрагмент)

<img src="food1.jpg" alt="food preparation" class="imgborder" />

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

css - файл (фрагмент)

#album img {
  border: 1px solid #000000;
}

html - файл (фрагмент)

<ul id="album">
  <li><img src="food1.jpg" alt="food preparation" /></li>
  <li><img src="food2.jpg" alt="food preparation" /></li>
</ul>

Такой прием избавляет от необходимости добавления атрибута с именем класса каждому отдельному изображению в контейнере.

Удаление средствами CSS синей рамки вокруг изображения, выполняющего функцию ссылки

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

Процесс удаления рамки схож с процедурой ее добавления. Для этого используется правило, присваивающее свойству border значение none:

img {
  border: none;
}

Задание фонового изображения для страницы с помощью CSS

Для указания фонового изображения веб-страницы используется свойство background-image по отношению к элементу body.

Следующее правило использует в качестве фона страницы изображение background-norepeat.jpg. Оно распространяется на любую страницу, к которой привязана содержащая его таблица стилей.

body {
  font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
  background-color: #D2D7E4;
  color: #000000;
  background-image: url(background-norepeat.jpg);
  background-repeat: no-repeat;
}

Результат выполнения правила показан на рис. 3.

Рис.3. Использование фонового изображения

По умолчанию изображение будет повторяться, располагаясь мозаично по горизонтали и по вертикали, пока не заполнит все доступное пространство. Показанный на рис. 3. результат был достигнут путем использования изображения со значением no-repeat свойства background.

Как изменить способ размножения фонового изображения

По умолчанию изображение будет повторяться, пока не заполнит все доступное пространство по горизонтали и по вертикали. Однако его поведением можно управлять с помощью свойства background-repeat.

Результат использования изображения с рис. 4 со значением no-repeat свойства background-repeat.

Рис.4. Заполнение фона страницы с помощью достаточно широкого изображения; свойству background-repeat присвоено свойство no-repeat

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

Такого эффекта можно добиться и более эффективным способом, состоящим в использовании меньшего по размеру изображения, которое быстрее загружается. Для этого нужно отрезать от нашего градиентного изображения тонкую полосу, как показано на рис. 5.

Рис.5. Отрезанная полоса градиентного изображения

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

Как позиционировать фоновое изображение

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

Для позиционирования фонового изображения используется CSS-свойство background-position:

backgroundposition.css (фрагмент)

#content {
  margin: 2em 4em 2em 4em;
  background-color: #FFFFFF;
  padding: 1em 1em 40px 1em;
  background-image: url(tick.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
}

Приведенное выше правило размещает изображение в правом нижнем углу области с контентом, как показано на рис. 6. Чтобы текст не перекрывал изображение, для содержащего его контейнера были добавлены внутренние отступы.

Рис.6. Позиционирование фонового изображения с помощью свойства background-position

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

background-position: bottom right;

Вы можете использовать любую из следующих комбинаций ключевых слов:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

Если вы укажете только первое из ключевых слов, то второе по умолчанию будет соответствовать значению center:

background-position: top;

Это описание тождественно следующей записи:

background-position: top center;

Значения в процентах

Добиться более точного расположения можно при указании значения в процентах. Это особенно эффективно, если величина и расположение других элементов страницы также указаны в процентах: в этом случае они будут менять свой масштаб в зависимости от разрешения и размеров экрана пользователя (такой прием также называют «резиновой» версткой):

background-position: 30% 80%;

Первое значение задает расположение элемента по горизонтали, а второе – по вертикали. Отсчет начинается из верхнего левого угла, который соответствует значению 0% 0%; соответственно, при значении 100% 100% правый нижний угол изображения будет расположен в правом нижнем углу страницы.

Как и в случае с ключевыми словами, при указании только одного процентного значения второе сохранит значение по умолчанию, составляющее 50%. Рассмотрим следующую декларацию стиля:

background-position: 30%;

Она тождественна следующей записи:

background-position: 30% 50%;

Использование единиц измерения

При позиционировании изображения с помощью CSS можно указать числовое значение в различных единицах измерения, например, пикселах:

background-position: 20px 20px;

Как и при указании значения в процентах, первое значение задает расположение элемента по горизонтали, а второе – по вертикали. Однако данный способ используется для четкого определения позиции верхнего левого угла фонового изображения.

Единицы измерения можно использовать совместно с процентными значениями, и при указании одного значения второе по умолчанию составит 50%.

Файлы к разделу

---