<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Множественные фоны в CSS3.

Множественные фоны в CSS3.

Всем привет! В этой небольшой статье мы с вами разберём, как задать несколько фоновых изображений на CSS3.

HTML у нас снова такой же

<html>
<head>
  <title>multibackgrounds</title>
  <meta charset="utf-8">
<body>
  <div class="block"></div>
</body>
</html>

И простые стили, чтобы увидеть наш блок, в который затем вставим изображения

.block {
  width: 700px;
  height: 400px;
  border: 3px solid #999;
  margin: 20px;

  background-image: url(img1.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

В background-image мы указываем путь к картинке, в background-repeat - повторять или не повторять картинку, а в background-position мы указываем позицию картинки в блоке: первое значение по горизонтали, второе по вертикали. Значения так же можно задавать в px.

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

.block {
  /* ... */
  background-color: #ccc;
  background-image: url(img1.jpg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

Ещё одно полезное свойство background-attachment, которое позволяет зафиксировать фон в одной позиции независимо от того, как двигается блок.

/* ... */
background-attachment: fixed;

background-size позволяет изменять размер картинки.

background-size: 50px 200px;

Первое значение по горизонтали, второе по вертикали.

Также данное свойство может иметь текстовые значения: contain и cover. Установив первое значение, картинка отмасштабируется таким образом, чтобы она содержалась полностью в нашем блоке, а при втором значении картинка заполнит весь контейнер, и, если места не хватит, то будет обрезана.

Итак, мы разобрали все основы фоновых изображений и теперь поговорим про множественные фоны.

В CSS3 появилась возможность задавать несколько фонов одному блоку. Чтобы это сделать, просто перечислите в background-image второе изображение через запятую

background-image: url(img1.png), url(img2.png);

Все наши остальные стили, такие как background-repeat и т.д. будут применены ко всем изображениям. Чтобы задать свои стили для каждого фона, их также нужно перечислить через запятую. Тогда первое значение будет относиться к первому фону, а второе - ко второму.

background-repeat: no-repeat, repeat;
background-position: left bottom, right center;

Так же обратите внимание на то, что первая картинка в background-image будет отображаться выше второй, вторая выше третей и т.д.

В конце следует сказать, что все эти свойства можно объединять в одно свойство background.

background: url(img1.png) left bottom no-repeat, url(img2.png) right center repeat;

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

alexbal2050 alexbal2050 16.04.2014 16:18:04

Я так понял, что на сайте новый редактор?

Ответить

mike124 mike124 16.04.2014 20:42:27

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

Ответить

php_programmer php_programmer 16.04.2014 22:07:04

Спасибо за замечание! Оно обязательно будет учтено.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.