Как сделать два фона в html

Как использовать несколько фоновых изображений с помощью CSS

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

Список значений background-position и/или background-repeat, которые разделены через запятые, задают положение и повторение соответственно для нескольких фоновых изображений:

div < background-image:url(image1), url(image2), url(image3); background-position:center right, right bottom, center top; background-repeat:no-repeat, repeat-y, repeat-x; >

В данном примере image1 имеет положение center-right и не повторяется, image2 имеет положение right bottom и повторяется по вертикали, а image3 имеет положение center top и повторяется по горизонтали.

Это один из способов установления нескольких изображений. Можно установить изображение с помощью свойства background-image, потом указать положение изображения с помощью свойства background-position и указать повторение изображений с помощью свойства background-repeat.

Второй способ добавления нескольких изображений это использование свойства background:

div < background: url("image1") no-repeat center bottom, url("image2") no-repeat center top , blue; >

При применении свойства background-color для нескольких фоновых изображений цвет применяется в конце перед всеми фоновыми изображениями. Как видите в вышеприведенном пример, синий цвет указывается в конце.

Давайте узнаем, как можно пошагово создать несколько фоновых изображений с помощью CSS!

1. Выберите три изображения. Они должны иметь небольшой размер, чтобы вы смогли увидеть, как работают свойства background-position и background-repeat.
2. Создайте простой HTML документ с элементом .
3. Примените стиль к элементу и не забудьте задать для него ширину и высоту.

А сейчас увидим результат!

Пример

html> html> head> title>Заголовок документа title> style> .example < width: 100%; height: 500px; background: url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png") no-repeat 10% 110%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png") no-repeat 120% 700% , #002054; > style> head> body> div class="example"> div> body> html>

Рассмотрим другой пример:

Пример

html> html> head> title>Заголовок документа title> style> #example< margin:0; padding:0; position: absolute; top: 0; left:0; bottom: 0; width: 100%; height: 70%; background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom, rgba(255,255,255,0), 40%,rgba(255,255,255,1) 60%); background-size: 20%, 20%, 100%, 100%, 50px; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x,repeat; background-position: 5% 40%, 95% 60%, center bottom; > > style> head> body> div id="example"> div> body> html>

Как сделать два фона?

Необходимо дляэлемента задать два фона:
первый — изображение,
второй — черный цвет.

При этом один из фонов должен быть полупрозрачным, чтобы изображение казалось более темным (из-за второго черного фона).

• Вопрос задан более трёх лет назад
• 694 просмотра

Комментировать
Решения вопроса 0
Ответы на вопрос 2

background: #000 url(«bg.jpg») no-repeat 50% 50%;

background: url( images/aztec_block.png) 0 0 no-repeat/cover, url(images/aztec_block.png) 50% 50% no-repeat;

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

К элементам можно применить несколько фонов. Они накладываются друг на друга: фон, заданный первым, станет верхним, а заданный последним — нижним. Только последний фон может включать цвет фона.

Задавать множественные фоны легко:

.myclass  background: background1, background2, /* …, */ backgroundN; > 

Вы можете сделать это сокращённым свойством background и отдельными свойствами кроме background-color . Таким образом, следующие свойства могут быть определены в виде списка по одному на фон: background , background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size .

Пример

В этом примере заданы три фона: логотип Firefox, изображение пузырей и линейный градиент (en-US) :

HTML

div class="multi-bg-example">div> 

CSS

.multi-bg-example  width: 100%; height: 400px; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; > 

Результат

Как вы можете видеть, логотип Firefox (первый в списке background-image ) расположен сверху, далее идёт фон с пузырями и в самом низу градиент (указанный последним). Каждое последующее под-свойство ( background-repeat и background-position ) применяется к соответствующим фонам. Например, первое значение свойства background-repeat применяется к первому фону и т.д.

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 16 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как сделать два фона на сайте — Вопросы по CSS

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.