| Kosten | Суббота, 24 Февраля 2018, 16:45 | Сообщение 1 |
| Теперь веб мастера появилась возможность, разместить несколько фонов на сайте или элементе, где они будут по вверх друг друга. Где первый фон выставляем по вверх, второй идет уже на первом, где может быть любое изображение, все зависит от тематического сайта. Или от того элемента блока, на котором вы распределяете эти фоны. Здесь несколько изображений, что будут фоном, можно указать при помощи отдельных свойств на фон или background стенографического свойства. Стили CSS полностью настраиваются, как вам нужно, это можно поставить заданный размер, но и безусловно изображений.
Самое главное помнить, что если бы вы использовали один из фонов для полностью непрозрачного и полностью повторяющегося изображения. Перечислите его последним не первым, иначе он будет охватывать все остальные.
Еще одна удивительная функция CSS, которую мы можем наконец использовать. Использование нескольких фонов CSS - невероятный полезный инструмент, предотвращающий необходимость вложенных элементов с единственной целью форматирования. Существует много причин, по которым вам может понадобиться создать композицию из нескольких изображений для создания фона. Я думаю, что наиболее важными являются следующие. Но также есть много вариантов, где один из них, это фон на градиенте, где также можно поставить несколько оттенков и к ним привязать картинку, что аналогично в оригинальном виде идет.
1. Чтобы уменьшить использование полосы пропускания, когда сумма размеров отдельных изображений меньше размера изображения с объединенными слоями, особенно если ваше изображение содержит повторяющиеся шаблоны.
2. Чтобы обеспечить способ для независимой манипуляции разными слоями, например, если вы собираетесь реализовать эффект параллакса.
В этом кратком совете мы узнаем, как применять несколько фоновых изображений к элементу только с одним объявлением CSS. Этот инструмент CSS3 позволяет вам накладывать несколько фоновых изображений друг на друга, чтобы создать идеальный внешний вид. И это так же просто, как указать разные изображения в элементе background-image, который вы, вероятно, уже используете.
Совсем недавно у нас была возможность привязать несколько фонов к одному элементу, что хорошо, поскольку многократные фоны очень полезны.
Вы разделяете свои различные определения фона запятыми:
CSS
Код background: url(image.png) no-repeat 99% center,
url(background-tile.png),
linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;
И фоны укладываются друг на друга друг с другом, сначала появляются сверху, затем второй под ним, затем третий и так далее. Возможно это не то что вы ожидали, поэтому будьте осторожны. Также обратите внимание, что мы поместили задний цвет фона в отдельное объявление свойства, потому что попытка включить его в несколько фонов, похоже нарушает все.
Вы также можете поместить несколько значений в background свойства longhand, где как например:
CSS
Код background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;
Хотя вам вероятно лучше использовать фон shorthand, что не только быстрее писать, но и легче видеть, какие фоновые свойства применяются к тому фону.
До появления нескольких фонов, веб разработчикам пришлось поместить несколько div элементов вокруг своих ящиков, а затем применить к каждому отдельному фоновому изображению.
HTML
Код <div class="background1"> <div class="background2"> <div class="background3"> <p>ZorNet: Создание сайта на uCoz</p> </div> </div> </div>
Давайте добавим несколько фонов в наш интересный пример коробки, мы хотим видеть градиент и огненный шар, оба одновременно:
CSS
Код p {
font-family: sans-serif;
padding: 20px;
background-color: #00ff11;
background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/fire-ball-icon.png) no-repeat 99% center, linear-gradient(to bottom, #42ff3f, #15c72a 50%, #145409);
color: #f9f0f0;
text-shadow: 0 1px 0 #6B6B6B;
}
Это дает нам следующий результат:
Демонстрация:
Здесь установлено несколько фонов, связанных с использованием нескольких присвоений свойств с несколькими значениями, что будут разделены запятой.
Код .myclass {
background: background1, background 2, ..., backgroundN;
}
Здесь у вас будет возможность сделать сокращенным background, не исключая индивидуальные свойствама, но только за исключением background-color свойство.
Этот фон отлично подойдет под тематические сайты как кино онлайн, или олфициальные представительство. Так как здесь задаем изначальный фон в формате PNG, в прозрачном. На него надаживаем палитру, это можно сделать как градиент, с любой стороны. Но и остается только поставить как логотип или ваш фирменный знак, что будет установлен в заданном углу.
HTML
Код <div class="zornet_ru_fondan"></div>
CSS
Код .zornet_ru_fondan {
width: 100%;
height: 253px;
background-image: url(http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png), url(http://zornet.ru/Aben/ABGDA/zornet_ru/bubbles.png), linear-gradient(to right, rgb(15, 77, 97), rgba(228, 228, 228, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
}
Так будет смотрится:
Демонстрация:
Надеюсь в статья вы нашли, что то новое для себя, а точнее обновить сайт и задать ему уникальный фон, что для виртуальности очень важно под тематические площадки, так как там, каждое свободное место стараются заполнить.
PS - теперь вы знаете, как можно сделать по установке фона, а точнее поставить несколько изображение и применить палитру цвета, которая отлично вписывается и безусловно под ваш основной дизайн оттенок вывести.
| | Страна: (RU) |
| |
