Изображение (картинка) в CSS. Основы CSS для начинающих. Урок №9

Всем привет!
В сегодняшнем уроке я расскажу о том, как в CSS можно из картинки сделать фон для веб-страницы, как поменять размер картинки в тексте, выровнять картинку по правому краю либо же по центру. И в качестве бонуса я покажу, как от картинки можно выпустить тень.
Урок будет интересным и содержательным.

Приступим!!!

РАБОТА НАД ФОНОВОЙ КАРТИНКОЙ

Фон – картинка

Свойство «BACKGROUND-IMAGE»
Фон веб-страницы можно менять не только цветом, но и заливать его картинкой.  Для этого используйте правило «background-image»к селектору «BODY» или «HTML»:

background-image: url(путь_к_изображению);

«путь_к_изображению» - зависит от того, где находится изображение. Посмотрите статью «Путь к файлам».

Пример:

body
{
background-image: url(bg.gif); /* Фоновая картинка */
}

Результат:

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

Свойство «BACKGROUND-REPEAT»
Вы заметили, что когда мы ставим фоновое изображение, то оно повторяется из левого верхнего угла по горизонтали и по вертикали до тех пор, пока не заполнит весь экран. Это не всегда удобно и не всегда обходимо.
Для регулировки повторов фоновой картинки существует правило «background-repeat».

Свойства:

• repeat-x – повторение по горизонтали
• repeat-y – повторение по вертикали
• repeat – повторение по вертикали и по горизонтали (значение по умолчанию)
• no-repeat – не повторяется

Пример:

body
{
background-image: url(bg.gif); /* Фоновая картинка */
background-repeat: repeat-x; /* фон будет повторяться по оси-х (горизонтали) */
}

Результат:

Фиксирование фоновой картинки

Свойство «BACKGROUND-ATTACHMENT»
Правило «background-attachment» указывает на то, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно.

Свойства:

• scroll – фон прокручивается вместе с содержимым (по умолчанию);
• fixed – фоновое изображение зафиксировано.

Пример:

body
{
background-image: url(bg.gif); /* Фоновая картинка */
background-repeat: no-repeat;/* фон не повторяется */
background-attachment: fixed ;/* фон зафиксирован */
}

Результат:

[ посмотреть пример ]

Положение фоновой картинки

Свойство «BACKGROUND-POSITION»
Правило «background-position» задает положение фоновому изображению.

Значение:
Задается в %, px и названиях позиций.

Приблизительные координаты в %, px:

Координаты в названиях позиций.

Свойство:

• left – лево,
• right – право,
• center – центр,
• top – верх,
• bottom – низ .

Схема:

Пример:

body
{
background-image: url(bg.gif); /* Фоновая картинка */
background-repeat: no-repeat; /* фон не повторяется */
background-attachment: fixed ; /* фон зафиксирован */
background-position: top center;/* позиция картинки */
}

Результат:

body
{
background-image: url(bg.gif); /* Фоновая картинка */
background-repeat: no-repeat; /* фон не повторяется */
background-attachment: fixed ; /* фон зафиксирован */
background-position: 80% 30%; /* позиция картинки */
}

Результат:

Размер фоновой картинки

Свойство «BACKGROUND-SIZE»
Чтобы увеличить или уменьшить размер фонового изображения, воспользуйтесь правилом «background-size»:

background-size: ширина высота;

Значение:
Задается в % и px.

Пример:

img
{
background-size: 500px 400px; /* размер картинки */
}

Если нужно сохранить пропорции картинки, тогда указывайте только ширину, а на высоте ставьте «auto»:

img
{
background-size: 200px auto; /* размер картинки */
}

Фоновая картинка на весь экран

Свойство «BACKGROUND-SIZE»
Фоновое изображение можно растянуть на весь экран.
То есть, фон будет на весь экран любых компьютеров и других мобильных устройств.
Нужно воспользоваться правилом «background-size» со значением «cover»:

background-size: cover; /* фоновая картинка на весь экран */

Пример:

body
{
background-image: url(bg.gif); /* Фоновая картинка */
background-repeat: no-repeat;/* фон не повторяется */
background-position: top center;/* позиция картинки */
background-size: cover; /* фоновая картинка на весь экран */
}

Результат:

[ посмотреть пример ]

Две фоновые картинки на веб-странице

Свойство «BACKGROUND-POSITION»
Если использовать две фоновые картинки, тогда шапка и подвал сайта будут выглядеть довольно красиво.  Для этого нужно добавить фоновое изображение к элементам — «HTML» и «BODY». Потом нужно выставить для каждой фоновой картинки позицию «top» и «bottom»:

body
{
background-image: url(1.gif); /* Фоновая картинка */
background-repeat: no-repeat;/* фон не повторяется */
background-position: top center;/* позиция картинки */
}

html
{
background-image: url(2.gif); /* Фоновая картинка */
background-repeat: no-repeat;/* фон не повторяется */
background-position: bottom center;/* позиция картинки */
}

Результат:

РАБОТА НАД КАРТИНКОЙ В ТЕКСТЕ

Если в HTML присутствуют картинки (картинки в тексте), то и с такими картинками можно проводить различные манипуляции.
Для примера добавьте вот такой код в HTML:

<html>
<head>
<title>основы CSS на StepkinBLOG.RU</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Основы CSS</h2>
<img src="images/1.jpg" >
<p>Здесь много текста</p>
</body>
</html>

А теперь остальные кода в CSS

Отступы вокруг картинки

Свойство «MARGIN»
Если вам нужно сделать отступ от картинки, воспользуйтесь свойством «margin».

Свойства:

• margin-top – отступ от картинки сверху
• margin-bottom – отступ от картинки снизу
• margin-right – отступ от картинки справа
• margin-left – отступ от картинки слева

Значение:
Значение задается в px или %.

Пример:

img {
margin-top: 100px;/* отступ от картинки сверху */
margin-bottom: 100px; /* отступ от картинки снизу */
margin-right: 150px; /* отступ от картинки справа */
margin-left: 80px; /* отступ от картинки слева */
}

 

Обтекание картинки текстом

Свойство «FLOAT»
Свойство «float» можно применить для картинки, которая находится внутри статьи, чтобы на странице изображение обтекало текстом. Аналог свойства «float» в HTML – атрибут «align».

Свойства:

• left — обтекание картинки по левому краю, текст обтекает его по правой стороне.
• right — обтекание картинки по правому краю, текст обтекает по левой стороне.
• none —обтекание не задается (значение по умолчанию).

Пример:

img
{
float: right; /* Выравнивание по правому краю */
}

Результаты:

- значение по умолчанию

- обтекание картинки по правому краю (right)

- обтекание картинки по левому краю (left)

Прозрачность картинки CSS

Свойство «OPACITY»
А знаете ли вы, что картинку можно сделать прозрачной, используя только CSS правило «opacity»?

Синтаксис:

opacity: значение;

Значение:

В значениях задается число в диапазоне от 0 до 1.
Значение 0 – полная прозрачность картинки.
Значение 1 – непрозрачность картинки (картинка останется такой как есть).
Значение в дробях (0.5) – полупрозрачность картинки.

Пример:

img
{
opacity:0.4; /* прозрачность картинки*/
}

Результат:

Размеры картинки в CSS

Свойства «WIDTH» и «HEIGHT»
Чтобы увеличить или уменьшить размер картинки, которая размещается в тексте, добавьте правило «width» - ширина и «height» - высота:

Синтаксис:

 width: размер; height: размер; 

Значение:
Значение задается в px или %.

Пример:

img
{
width:50px; /* ширина */
height: 50px; /* высота */
}

Тень от картинки в CSS

Свойство «BOX-SHADOW»
Можно от картинки сделать тень. Это придаст изображению или дизайну сайта привлекательный вид.  Сейчас все увидите.
Итак, для создания тени будем использовать «box-shadow».

Синтаксис:

Свойство:

1. - inset – тень внутри элемента, без inset тень будет наружу;
   box-shadow: 0 0 5px – тень вокруг элемента
   
   box-shadow: inset 0 0 5px; - тень внутри
   
2. сдвиг тени по горизонтали (6 px — вправо, 6 px — влево);
3. сдвиг по вертикали (6 px — вниз, 6 px — вверх);
4. размытие тени (0 — четкая тень);
5. растяжение тени (3 px — растяжение, 3 px — сжатие);
6. цвет тени

Пример:

img
{
box-shadow: -19px 0 22px -19px #000; /*тень картинки*/
}

Примечание

Все примеры, указанные выше, непосредственно касались всех элементов веб-страницы. Если вы помните урок «Синтаксис CSS», то знаете, что можно задать правило для некоторых картинок. Например, вы хотите сделать картинку с тенью только на странице контактов.

Для этого пропишите в HTML для первого тега «img» класс, например, «stepkiblog».

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Работа с картинками в CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="images/1.jpg" class="stepkiblog">
<p>Текст на сайте</p>
<img src="images/1.jpg">
</body>
</html>

В CSS:

.stepkiblog
{
box-shadow: -19px 0 22px -19px #000; /*тень картинки*/
}

Если прописать ID:

<img src="images/1.jpg" id="stepkiblog">

То в CSS это будет так:

#stepkiblog
{
box-shadow: -19px 0 22px -19px #000; /*тень картинки*/
}

Пожалуйста, запомните это примечание, это важно!
Вот и подошли мы к завершению этого урока. Надеюсь, что вы все поняли. Если нет, пишите в комментариях, объясню подробней и, если нужно будет, поправлю текст в уроке.
Все, удачки!

Жду вас на следующих уроках!
Подписывайтесь!