Работа с картинками и изображениями в CSS

Работа с картинками и изображениями в CSS

Картинки на сайте имеют две функции: во-первых, они улучшают внешний вид ресурса, во-вторых, помогают воспринимать информацию лучше.

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

Фоновая картинка.

background | background-image

Если вы хотите добавить фоновую картинку на веб-страницу, воспользуйтесь стилевым свойством background, который задается к селектору body. Задайте путь к изображению внутри значения url.

<style> body { background: url(путь к файлу); } </style><br>

Или

<style> body { background-image: url(путь к файлу); } </style><br>

Как выбрать графический путь? Графический путь будет зависеть от того, где он располагается.
Например, если HTML-файл и фоновый рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif), если фоновый рисунок хранится в папке images, тогда путь будет вот таким url(images/bg.gif).

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

Пример:

<html> <head> <title>Фон в CSS</title> <style> body { background: #000000 url(images/bg.gif); /* Цвет фона и путь к графическому файлу */ } </style> </head> <body> <p>Ваш текст</p> </body> </html><br>

Или

<html> <head> <title>Фон в CSS</title> <style> body { background-image: url(images/bg.gif); /* Путь к графическому файлу */ background-color:#000000; /* Цвет фона */ } </style> </head> <body> <p>Ваш текст</p> </body> </html><br>

Повтор фоновой картинки.

background-repeat

Бывают моменты, когда нам необходимо управлять повторами фонового изображения. Например, нам выгодно, чтобы повтор фонового изображения был только по горизонтали или только по вертикали, а бывает момент, что повтор фонового изображения нам вообще не нужен. Итак, как нам выкрутиться в этой ситуации? Воспользуйтесь стилевым свойством background-repeat.

background-repeat: repeat-y | repeat-x | no-repeat;

Значения:

repeat-y - повтор фонового изображения по оси - у (вертикаль);
repeat-x - повтор фонового изображения по оси - х ( горизонталь);
no-repeat; - запретить повтор фонового изображения (изображение будет как оно есть);

Если не задать стилевое свойство background-repeat, тогда фоновое изображение веб-страницы будет залито полностью фоновой картинкой.

Пример:

<em><html> <head> <title>Фон в CSS</title> <style> body { background-image: url(images/bg.gif); /* Путь к графическому файлу */ background-color:#000000; /* Цвет фона */ background-repeat: repeat-x; /* фон будет повторятся по оси-х (горизонтали) */ } </style> </head> <body> <p>Ваш текст</p> </body> </html><br></em>

Или

<em><html> <head> <title>Фон в CSS</title> <style> body { background: #000000 url(images/bg.gif) repeat-x; /* Цвет фона, путь к графическому файлу и повтор фона по оси-х (горизонтали)*/ } </style> </head> <body> <p>Ваш текст</p> </body> </html><br></em>


11:22
112
RSS
Нет комментариев. Ваш будет первым!