Лого www.SiteHere.ru

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

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

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

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

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

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

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

Начнем данный урок с позиционировании фонового изображения, а затем рассмотрим сокращенную запись фоновых свойств.

Позиционирование фона

При вставке изображения на фон блока его можно расположить так, как вам необходимо. Рассмотрим на примере:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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 id="block1"><h2>Love block</h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem a quam rutrum pulvinar quis in felis. Integer iaculis sapien et tempor tempus.</div>
        <div id="block2"><h2>Wink block</h2>Mauris placerat tellus vel felis sollicitudin, tempus auctor elit ultricies. Duis quis est auctor, volutpat odio convallis, lacinia turpis. Integer venenatis leo id sodales molestie.</div>
    </div>
</body>
</html>

А на заднем фоне разместим изображение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#content{
    width:800px; /* ширина блока div, в котором находятся все элементы */
    margin:0 auto; /* располагаем данный блок по центру */
}
 
#block1{
    border:1px solid #cc0000; /* красная граница */
    width:200px; /* ширина блока */
    background-image: url('images/love.png'); /* изображение на фон */
    background-repeat:no-repeat; /* запрещаем повтор фонового изображения */
    background-position:150px 5px; /* позиционируем фоновое изображение */
    padding:0 5px 10px 10px; /* внутренние отступы */
    text-align:justify; /* растягиваем текст по всему блоку */
    float:left; /* обтекание слева для блока */
}
 
#block1 h2{
    color:#cc0000;  /* цвет текста у тега h2 в блоке div id='block1'*/
}
 
#block2{
    border:1px solid #cc0000; /* красная граница */
    width:200px; /* ширина блока */
    background-image: url('images/;).png');  /* изображение на фон */
    background-repeat:no-repeat; /* запрещаем повтор фонового изображения */
    background-position:150px 5px;  /* позиционируем фоновое изображение */
    padding:0 5px 10px 10px; /* внутренние отступы */
    text-align:justify;/* растягиваем текст по всему блоку */
    margin-left:230px; /* отступ слева для данного блока, т.к. у того свойство float = left */
}
 
#block2 h2{
    color:#cc0000; /* цвет текста у тега h2 в блоке div id='block2'*/
}

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

Скриншот:

Background-position в браузере

Реальный пример:

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

Сейчас рассмотрим как происходит позиционирование фонового изображения более подробно. Мы в CSS написали

1
background-position:150px 5px;  /* позиционируем фоновое изображение */

Что значат эти две цифры: Первая — это позиция по горизонтали, вторая — по вертикали.(Верхний левый угол это 0% 0%. Правый нижний — 100% 100%. Если Вы оставите только одну цифру, вторая автоматом будет 50%)

Сокращенная запись фоновых свойств

Как и в свойствах, которые мы изучали раньше, фоновые свойства также можно записать в сокращенной форме. Посмотрим как:

Сокращенная запись фоновых свойств

Как видите мы просто перечисляем через пробел нужные нам параметры.

На этом всё. Пробуйте применять данные свойства на практике, тогда вы быстрее их поймете и запомните.

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

Урок 13. Работа с изображениями. Часть 2 4.67/5 (93.33%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

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

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