Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

22.02.2017


13:07


10963


4


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

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

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

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

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

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

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

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

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

Пример:

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

Результат:

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

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

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

Свойства:

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

Пример:

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

Результат:

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

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

Свойство «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:

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

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

Свойство:

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

Схема:

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

Пример:

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

Результат:

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

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

Результат:

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

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

Свойство «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;/* позиция картинки */
}

Результат:

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

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

Если в 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; /* Выравнивание по правому краю */
}

Результаты:

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

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

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

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

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

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

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

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

Синтаксис:

opacity: значение;

Значение:

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

Пример:

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

Результат:

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

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

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

Синтаксис:

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



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

Пример:

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

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

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

Синтаксис:

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

Свойство:

  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; /*тень картинки*/
}

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

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



Случайные записи:

  1. Сворачивание (аккордеон). Основы bootstrap 3 для начинающих. Урок №22
  2. Коды цветов в HTML. Основы HTML для начинающих. Урок №11
  3. Шрифты в CSS. Основы CSS для начинающих. Урок №6
  4. Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20
  5. Коротко о PHP. Основы PHP с нуля. Урок №1

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

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

  1. Павел Федорович says:

    Блин, посоветуйте какой небудзь подробный видио урок по css а то все что видел это не подробные.

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Евгения Попова посмотрите. Человек толково объясняет.

    Ответить

  2. Маргарита says:

    Понятней и проще я не видела. Все умника наворачивают и ерунду предлагают. Здесь, автор все подробно написал, именно так, как необходимо объяснить человеку. Огромное Вам спасибо!

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Спасибо Вам, Маргарита, за приятный комментарий! :rose:

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245