Exore LTD » Основы CSS » Урок 13. Работа с изображениями. Часть 1
Лого SiteHere.ru

Октябрь 22, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Урок 13. Работа с изображениями. Часть 1

Урок 13. Работа с изображениями. Часть 1

Здравствуй, уважаемый читатель.

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


Перед изучением данного урока пройдите предыдущие уроки:


Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей

Теория и практика

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

Фон в виде цвета

Фон в виде цвета задается и для того чтобы, если пользователь зашел с отключенными картинками ему не показывался белый фон. Цвет фона в CSS задается свойством background-color. Рассмотрим на примере:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content1">
        текст
    </div>
</body>
</html>

Зададим цвет фона для всей страницы светло-розовый, а для блока <div id="content1"> — голубой.

1
2
3
4
5
6
7
8

body{
    background-color:#FFC4C4; /* светло-розовый цвет */
}
 
#content1{
    background-color:#C4D4FF; /* голубой цвет */
    height:150px;
}

Как это выглядит в браузере:

Цвет фона страницы

Фон в виде изображения

Для примера возьмем следующий html код:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        Здесь вставьте много текста!
    </div>
</body>
</html>

Вставим на фон большое изображение:

1
2
3
4
5
6
7
8

body{
    background-image:url('bg.jpg'); /* изображение для фона */
}
 
#content{
    width:600px;
    margin:0 auto;
}

Посмотреть примерСкачать


Но как видите из-за того что текста у нас много изображение начинает повторяться. Для того чтобы оно не повторялось необходимо использовать свойство background-repeat. Но если применить только данное свойство мы увидим белый фон там, где изображение заканчивается. Для того чтобы зафиксировать изображение необходимо использовать свойство background-attachment. Как это выглядит в коде:

1
2
3
4
5
6
7
8
9
10
11

body{
    background-image:url('bg.jpg'); /* изображение для фона */
    background-repeat:no-repeat; /* запрещаем повтор изображения */
    background-attachment:fixed; /* фиксируем изображение */
    background-color:#cccccc; /* задаем фон, если изображения на странице отключены */
}
 
#content{
    width:600px; /* задаем ширину блока */
    margin:0 auto; /* размещаем блок по центру */
}

Вот как это выглядит в браузере:

Посмотреть примерСкачать


А сейчас рассмотрим повтор фонового изображения. Для примера возьмем тот же код html страницы:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="content">
        Здесь вставьте много текста!
    </div>
</body>
</html>

В CSS пропишем(но вместо bg.jpg у нас картинка маленькая, которая в дальнейшем будет повторяться):

1
2
3
4
5
6
7
8
9

body{
    background-image:url('bg.jpg'); /* изображение для фона */
    background-repeat:no-repeat; /* запрещаем повтор изображения */
}
 
#content{
    width:600px; /* задаем ширину блока */
    margin:0 auto; /* размещаем блок по центру */
}

Если мы напишем следующим образом то в браузере увидим:

Маленькая картинка для фона

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

1
2
3
4
5
6
7
8
9

body{
    background-image: url('bg.jpg'); /* изображение для фона */
    background-repeat: repeat; /* повторяем изображение */
}
 
#content{
    width: 600px; /* задаем ширину блока */
    margin:0 auto; /* размещаем блок по центру */
}

Как это выглядит в браузере:

Посмотреть примерСкачать

Как видите здесь всё очень просто. Попробуйте вставлять разные изображения и смотреть что получиться. На этом урок закончен. Вопросы пишите в комментариях.

Больше практикуйтесь!

Предыдущий урок
Следующий урок

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *