Как сделать фон из двух цветов css
Перейти к содержимому

Как сделать фон из двух цветов css

  • автор:

Смешивание двух цветов для фона в CSS

Я хочу сложить два цвета один поверх другого. Я сделал это, создав и совмещая два блока, располагая один наверху с непрозрачностью 60%. Интересно, есть ли более простой способ, требующий только одного div с двумя цветами или, может быть, только одного цвета, который представляет собой смесь двух. Я размещаю здесь свой код. Если вы заметили какие-либо плохие практики, дайте мне знать, пожалуйста. Я очень хочу улучшить свои навыки.

* < padding: 0; margin: 0; border: 0; box-sizing: border-box; >/* ~~~~~~~~~~SKY~~~~~~~~~~ */ #sky < position: relative; z-index: -100; width: 100vw; height: 100vh; background-image: linear-gradient( to top, midnightblue, black); >/* ~~~~~~~~~~MOON~~~~~~~~~~ */ .moon < position: absolute; top: 3%; right: 0%; width: 200px; height: 200px; border-radius: 50%; >#dark-moon < background-color: silver; >#light-moon < background-color: goldenrod; background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%); background-size: 60px 60px; background-position: 0 0, 30px 30px; opacity: 60%; >/* ~~~~~~~~~~SEA~~~~~~~~~~ */ #sea

Как видите, над серебряной луной золотая. Как я могу получить тот же результат, имея только одну луну? Свободный перевод вопроса Mixing two colors for a background in CSS от участника @Davide.

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

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

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

.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: Фон

При изучении CSS мы уже сталкивались с установкой пользовательского цвета для текста внутри блока. Но это не единственная возможность по установке цвета — его можно установить в качестве фона для всего блока.

Обратите внимание, область с теорией и редактором в уроках отделены от остального сайта белым фоном. Это делается не только для удобного чтения, но и для того, чтобы глаза быстро находили область с основным контентом. Для установки фонового цвета используется свойство background-color , значением которого является цвет.

В качестве цвета можно использовать уже знакомые hex -значения:

.card

Карточка с белым текстом на фиолетовом фоне

Задание

Добавьте в редактор с классом background и установите цвет фона #2196f3 . Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

  • Выбрать цвет и получить его hex -код можно на HTML Color Codes

Как сделать фон из двух цветов?

Author24 — интернет-сервис помощи студентам

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

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Как сделать шапку 2х цветов с переходом
Задача — сделать шапку как на картинке (2 цвета с косым переходом)

Как сделать маргающий текст из 2х разных цветов
Нужно сделать маргающий текст с периодом в 0.5 сек из красного и синего цветов, говорят на это.

Как сделать на одной странице ссылки разных цветов?
Т.е. например сверху страницы ссылки синие, снизу — красные и т.п.

636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400

1 2 3 4 5 6 7 8 9 10 11 12 13
html, body{ height: 100%; } body{ background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 50%, #ffffff 50%, #ffffff 50%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#000000), color-stop(50%,#ffffff), color-stop(50%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #000000 50%,#ffffff 50%,#ffffff 50%); /* IE10+ */ background: linear-gradient(to bottom, #000000 50%,#ffffff 50%,#ffffff 50%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ }

16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
#bg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1;} #bg:after, #bg:before { content: ""; display: block; height: 50%; left: 0; width: 100%;} #bg:after { background-color: #000; bottom: 0;} #bg:before { background-color: #f00; top: 0;}
div id="bg">/div>

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

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