Работа с картинками и изображениями в 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>