Смешивание двух цветов для фона в 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.
Как сделать фон из двух цветов?
Суть в том, что хочу сделать вертикально пол экрана белый фон, а вторая — черный.
Можно ли реализовать в 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>
Регистрация: 28.06.2012
Сообщений: 69
Это горизонтальное , а как сделать именно вертикально. Левая сторона-черная, правая-белая?
16 / 16 / 13
Регистрация: 10.07.2014
Сообщений: 84
1 2 3 4 5 6 7 8 9 10 11 12 13
#bg:after, #bg:before { content: ""; display: block; height: 100%; top: 0; width: 50%;} #bg:after { background-color: #fff; right: 0;} #bg:before { background-color: #000; left: 0;}
Как разделить фон на два цвета html css
Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 16.11.2023)
323
324
вертолетов
10121
артиллерия
585
10060
22
2.16. CSS-градиент
CSS-градиент представляет собой переходы от одного цвета к другому.
Градиенты создаются с помощью функций linear-gradient() и radial-gradient() .
Градиентный фон можно устанавливать в свойствах background , background-image , border-image и list-style-image .
Как сделать градиент в CSS
- Содержание:
- 1. Линейный градиент: linear-gradient()
- 2. Радиальный градиент: radial-gradient()
- 3. Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
- 4. Кроссбраузерный градиент
- 5. Комбинация градиента и фонового изображения
Поддержка браузерами
IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Линейный градиент linear-gradient()
Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента.
Если направление не указано, используется значение по умолчанию — сверху-вниз.
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
background: linear-gradient(угол / сторона или угол наклона с помощью ключевого слова (пары ключевых слов), первый цвет, второй цвет и т.д.); Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах deg , значение которого определяет угол наклона линии внутри элемента.
с помощью ключевых слов to top , to right , to bottom , to left , которые соответствуют углу градиента, равному 0deg , 90deg , 180deg и 270deg соответственно.
Если направление задано парой ключевых слов, например, to top left , то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.
Для неравномерного распределения цветов указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в % , где 0% — начальная точка, 100% — конечная точка, например:
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
2. Радиальный градиент radial-gradient()
Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.); Форма градиента определяется ключевыми словами circle или ellipse . Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position , с добавлением приставки at . Если позиция центра не задана, используется значение по умолчанию at center .
С помощью пары значений, указанных в единицах длины % , em или px , можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.
Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).
| Значение | Описание |
|---|---|
| closest-side | Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse . |
| farthest-side | Размер рассчитывается из расстояния до дальних сторон. |
| closest-corner | Размер рассчитывается из расстояния до ближних углов. |
| farthest-corner | Размер рассчитывается из расстояния до дальних углов. |
С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.
Мяч
Кнопка
.wrap < height: 200px; padding: 50px 0; background: #cccccc; >.button
Почтовая марка
Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.
.container < background: #B7D1D8; padding: 25px; >.wrap < background: radial-gradient(transparent, transparent 4px, white 4px,white); padding: 10px; width: 300px; height: 220px; background-size: 20px 20px; background-position: -10px -10px; /*обрезаем узор по краю*/ margin: 0 auto; >img
3. Повтор градиента
В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно. Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
4. Кроссбраузерный градиент
Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.
Линейный градиент
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */ background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */ background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */ background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */Повтор линейного градиента
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */ background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */Радиальный градиент
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */ background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */ background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */ background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */ background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */ background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */Повтор радиального градиента
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */ background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */ background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */ background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */5. Комбинация градиента и фонового изображения
За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.