Как сделать input прозрачным в css
Для того, что бы сделать поле ввода (input) прозрачным, достаточно выставить свойству background элемента, значение transparent. Рассмотрим пример, в котором мы дополним наш input и другими стилями для наглядности.
Исходный HTML файл и стили:
class="wrapper"> type="text" id="text" placeholder="Введите данные"> .wrapper /* Наше поля ввода будет прозрачным, поэтому добавим блок-обертку с цветом */ width: 200px; height: 30px; background-color: #fff4e6; > input /* Делает само поле ввода прозрачным */ background: transparent; /* Убираем рамки вокруг поля ввода */ border: none; /* Добавим нижнюю черту для красоты */ border-bottom: 1px solid #444; > 
Результат:
Как сделать прозрачный фон в css
От автора: приветствую вас на страницах блога webformyself. Сегодня я хотел бы вам рассказать, как можно сделать прозрачный фон. Css реализует такой прием очень легко, причем есть несколько вариантов, как это сделать.
Прозрачность в сайтостроении
Для начала стоит для себя уяснить, что цвет может быть полностью прозрачным (по сути, невидимым) и полупрозрачным. Это когда его немного видно, а через него могут быть видны другие элементы веб-страницы.
Как реализуется
Собственно, есть два основных варианта, как сделать прозрачный фон. Первый:
background : transparent ;
Нужному элементу задаем такое правило и все будет работать. Второй вариант:
background : rgba ( 0 , 0 , 0 , 0 ) ;
Цветовой режим rgba является усовершенствованной версией rgb, только тут указывается еще и прозрачность, которую можно задавать в значениях от 1 до 0, где 0 – полностью прозрачный цвет. Таким образом, rgba является отличной возможностью для задания полупрозрачного фона.
Зачем все это нужно?
Казалось бы, а почему цвет не установить как белый, и тогда его и так не будет видно? Да, но тут важно помнить, что по дизайну все сайты разные.
Если фоновый цвет всей страницы или отдельных крупных структурных блоков отличен от белого, то такой метод уже не подходит.
По умолчанию у блочного элемента при его создания нет явного фона, он полностью прозрачный. Убедиться в этом легко – создайте на пустой странице блок, определите ему какие-то размеры (ширину и высоту), больше ничего не задавайте. Увидите ли вы что-то на странице? Нет.
Полупрозрачность
Наверняка эта возможность интересует вас намного больше, потому что она позволяет добиваться интересных эффектов. Во-первых, таким образом можно добиться нужных оттенков, более мягких и приглушенных. Например, если записать в качестве цвета что-то вроде этого:
«Как создать прозрачный фон в HTML/CSS: простые шаги для начинающих»
Если вы новичок в HTML/CSS, то создание прозрачного фона может показаться сложной задачей. Однако, это важный элемент веб-дизайна, который может повысить визуальное впечатление сайта. В этой статье мы рассмотрим простые шаги, которые помогут вам создать прозрачный фон без особых усилий.
Прозрачный фон может быть полезен для различных элементов веб-страницы, таких как меню, кнопки, фотографии и многое другое. Создание прозрачного фона в HTML/CSS дает вам возможность добавить глубину и текстуру в дизайн.
Мы расскажем, как создать прозрачный фон с помощью CSS свойства opacity, а также научим вас использовать RGBA цвета, которые позволяют задавать прозрачность, не меняя основные цвета. Эти простые шаги помогут вам создать привлекательный и профессиональный веб-дизайн.
Как создать прозрачный фон в HTML/CSS?
Прозрачный фон — это полезный эффект, который может сделать ваш сайт более красивым и элегантным. Чтобы создать прозрачный фон в HTML/CSS, вы должны использовать значение rgba или opacity для свойства background.
Если вы хотите использовать rgba, то вы можете использовать следующий синтаксис:
| Свойство | Значение |
|---|---|
| background | rgba(255, 255, 255, 0.5) |
Значение rgba состоит из четырех параметров: первые три — это значения красного, зеленого и синего цветов, а четвертый — прозрачность. Значение прозрачности может быть любым числом от 0 до 1, где 0 — это полностью прозрачный, а 1 — это полностью непрозрачный цвет.
Если вы хотите использовать значение opacity, то вы можете использовать следующий синтаксис:
| Свойство | Значение |
|---|---|
| background-color | rgba(255, 255, 255) |
| opacity | 0.5 |
Значение opacity также может быть любым числом от 0 до 1. Однако, если вы используете значение opacity, то это также сделает прозрачным все содержимое элемента, включая текст и изображения.
Важно отметить, что не все браузеры поддерживают значение rgba и opacity. Поэтому, если вам нужен более совместимый код, то вы можете использовать PNG изображения с прозрачным фоном.
Шаг 1: Определение целей
Прежде чем приступить к созданию прозрачного фона в HTML/CSS, необходимо определить, какую цель вы хотите достичь. Например, можете ли вы использовать четкий фон для лучшей видимости вашего контента? Или желаете вы создать эффектный макет страницы?
Также важным фактором является уровень вашей экспертизы в HTML/CSS. Если вы новичок, может быть трудно создать сложный дизайн/эффект, используя CSS. В этом случае, вам может потребоваться обратиться к профессионалам, чтобы получить помощь в создании необходимого эффекта.
Итак, первый шаг — определите, какую задачу вы хотите решить, а также оцените свои навыки в области HTML/CSS.
Шаг 2: Подготовка изображения
Перед тем как добавлять изображение на страницу, необходимо подготовить его. Сначала необходимо выбрать изображение с прозрачным фоном. Если изображение не имеет прозрачного фона, его нужно обработать при помощи графического редактора.
Еще по теме: First child CSS не работает
Использование графического редактора для создания прозрачного фона может быть необходимым в следующих случаях: если у вас нет изображения с прозрачным фоном; если вы хотите изменить изображение и создать прозрачный фон; если у вас есть изображение с прозрачным фоном, но размер файла слишком большой.
Чтобы создать прозрачный фон, следует загрузить изображение в графический редактор и удалить все ненужные элементы. Затем нужно выделить область, которую необходимо сохранить (обычно это объект на изображении), и удалить все остальное. После этого сохраните изображение в формате PNG.
Подготовка изображения перед добавлением на веб-страницу — это важный шаг, который поможет сохранить качество изображения и обеспечить прозрачность его фона. При этом стоит помнить, что качество изображения и скорость загрузки веб-страницы зависят от размера файла. Поэтому необходимо подобрать наилучший баланс между качеством и размером файла.
Шаг 3: Добавление изображения в HTML-код
Теперь, когда мы создали прозрачный фон, можно добавить изображение. Для этого нам нужно использовать тег . Этот тег отображает изображение на веб-странице.
Чтобы добавить изображение, нужно внести следующие изменения в код:
- Добавьте тег
внутри тега с заданным CSS-стилем для прозрачного фона.
- В атрибуте src укажите путь к изображению на вашем компьютере или в интернете.
- Установите значение атрибута alt. Он определяет альтернативный текст, который будет показан, если изображение не сможет загрузиться.
Обратите внимание, что в нашем примере установлен прозрачный фон с помощью CSS-стиля, а изображение добавлено внутри тега с этим стилем.
Таким образом, мы успешно добавили изображение на нашу веб-страницу со стилем прозрачного фона.
Шаг 4: Настройка прозрачности в CSS
Добавление прозрачности к фону HTML-элемента может быть выполнено с помощью CSS.
Для начала нам нужно открыть файл CSS и создать селектор, который будет определять прозрачность фона. Для этого мы используем свойство «opacity».
Свойство «opacity» может принимать значения от 0 до 1, где 0 обозначает полную прозрачность, а 1 — полную непрозрачность.
Для настройки прозрачности фона элемента, добавьте селектор и значение «opacity» в файл CSS, как показано в примере ниже:
- Выберите элемент, которому нужна прозрачность, например, body или div.
- Добавьте свойство «opacity» с нужным значением.
Пример:
Этот пример установит прозрачность фона для всех элементов div на 70%.
Теперь вы можете изменять значение «opacity», чтобы настроить нужную уровень прозрачности. Это позволяет создавать эффекты и дизайны, которые требуют прозрачного фона веб-страницы.
Шаг 5: Использование RGBA
Для создания прозрачного фона в CSS можно использовать RGB-цвет, но эта опция не позволяет установить прозрачность фона. Чтобы добиться желаемого эффекта, можно воспользоваться RGBA-цветом, который позволяет указать не только красный, зеленый и синий цвета, но и уровень прозрачности.
RGBA-цвет указывается в формате «rgba(красный, зеленый, синий, прозрачность)». Прозрачность определяется числом от 0 (полностью прозрачный) до 1 (непрозрачный). Например, чтобы создать прозрачный белый цвет, можно указать такой код:
- background-color: rgba(255, 255, 255, 0.5);
Где 255 – наивысшее значение яркости для каждого цвета, а 0,5 – уровень прозрачности, равный 50%.
Аналогично можно задать прозрачность для других цветов и элементов стиля, например, для текста:
При использовании RGBA-цвета нужно учитывать, что не все браузеры поддерживают эту опцию, поэтому лучше дополнительно указать более стандартные варианты стилей.
Шаг 6: Создание прозрачного фона для блоков
На этом этапе мы будем создавать прозрачный фон для нашего блока. Для этого мы будем использовать свойство opacity CSS.
Еще по теме: Как управлять разрывами между элементами списка с помощью CSS: подробное руководство
Свойство opacity принимает значение от 0 до 1. Значение 1 означает полную непрозрачность, а 0 – полную прозрачность. Мы можем использовать промежуточные значения, например 0,5, чтобы создать полупрозрачный фон.
Чтобы задать прозрачный фон для блока, добавьте в свой CSS класс следующий код:
- opacity: 0.5; – будет создан полупрозрачный фон с уменьшенной на 50% видимостью.
- opacity: 0.9; – будет создан полупрозрачный фон с уменьшенной на 10% видимостью.
Если вы хотите создать полностью прозрачный фон, используйте значение 0:
- opacity: 0; – будет создан полностью прозрачный фон.
Важно отметить, что свойство opacity также влияет на прозрачность содержимого блока. Если вы хотите сохранить непрозрачность текста внутри блока, используйте rgba() значение для свойства background-color. Например,
- background-color: rgba(255, 255, 255, 0.5); – будет создан прозрачный фон, но текст внутри блока останется непрозрачным.
Теперь вы знаете, как создать прозрачный фон для блоков в HTML и CSS. Используйте это знание, чтобы создавать визуально привлекательные и профессиональные сайты.
Шаг 7: Использование прозрачности в фоновой картинке
Прозрачность в CSS может быть применена не только к цвету фона, но также и к фоновой картинке. Это позволяет создавать эффектные дизайнерские решения.
Для того чтобы добавить прозрачность к фоновой картинке, нужно воспользоваться свойством opacity. Оно может принимать значения от 0 до 1, где 0 — полная прозрачность, 1 — полная непрозрачность.
К примеру, чтобы сделать картинку на фоне на 50% прозрачной, нужно применить следующий код:
- background-image: url(‘bg-image.png’);
- opacity: 0.5;
Учитывайте, что при добавлении прозрачности к фону, содержимое, находящееся внутри данного блока, также становится прозрачным. Если это не желательно, то можно воспользоваться свойством background-color и задать цвет фона для блока.
Как и в случае с прозрачным цветом фона, прозрачность фоновой картинки может не поддерживаться старыми версиями браузеров. В таком случае, можно воспользоваться через прозрачный PNG-изображение или специальные JavaScript-библиотеки для предоставления возможности просмотра прозрачных фонов на старых браузерах.
Шаг 8: Применение прозрачности к тексту
Если вы хотите применить прозрачность к тексту на вашей веб-странице, то используйте свойство «opacity» в CSS. Вам нужно указать значение от 0 до 1, где 0 — полная прозрачность, а 1 — полная непрозрачность. Например:
Пример:
- Используйте селектор для выбора нужного текста: p
- Установите значение «opacity» в CSS: opacity: 0.5;
- Создайте новый класс и примените его к нужному тексту: .transparent-text
Применение прозрачности к тексту может повысить его читаемость и улучшить визуальное восприятие вашей веб-страницы. Однако, будьте осторожны и не переусердствуйте с прозрачностью, так как это может привести к потере читабельности текста.
Важно помнить, что свойство «opacity» применяется ко всему элементу, включая его дочерние элементы. Если вы хотите применить прозрачность только к тексту, а не к фону, то используйте псевдоэлементы или задавайте отдельные стили для каждого дочернего элемента.
Шаг 9: Проверка совместимости браузеров
После того, как вы создали прозрачный фон для вашего сайта, не забывайте проверять его совместимость с различными браузерами.
Каждый браузер имеет свои особенности и возможно, что ваш фон будет выглядеть по-разному на разных браузерах. Поэтому, советуем провести проверку на таких браузерах, как Chrome, Firefox, Safari, Opera и Internet Explorer.
Если вы планируете использовать особые CSS-свойства, стоит убедиться, что они поддерживаются всеми браузерами, на которых будет использоваться ваш сайт. Это может существенно повлиять на внешний вид и функциональность вашего сайта.
- Проверка браузеров — это важный шаг, который поможет вам гарантировать, что ваш сайт будет выглядеть на всех устройствах одинаково хорошо.
- Мы рекомендуем проводить эту проверку после каждого изменения в дизайне сайта, чтобы быть уверенным в его правильной работе.
Еще по теме: Как добавить вращение по клику мыши 3D кубика в CSS?
Варианты использования прозрачности в веб-дизайне
Прозрачность – один из элементов, который помогает веб-дизайнерам создавать более красивые и эффектные интерфейсы. С этим свойством можно играть, создавая необычный и оригинальный дизайн. Рассмотрим несколько вариантов, где можно использовать прозрачность.
- Меню навигации: включение прозрачности в фон для меню навигации позволит перепланировать внешний вид сайта и выделить важные элементы дизайна;
- Полупрозрачность для фона сайта: можно установить полупрозрачный фон, который не будет мешать чтению текста, но создаст дополнительный визуальный эффект на сайте;
- Оформление блоков с контентом на фоне изображения: возможно установить небольшую прозрачность блокам с содержимым на фоне изображения, чтобы заполнить информационный блок и создать уникальным дизайн;
- Текст на фоне изображения: при помощи прозрачности можно установить фоновое изображение для текста и сделать его легче для чтения. Такой вариант дизайна обычно используется для актуализации материала;
- Полупрозрачная форма обратной связи: при помощи прозрачности для формы обратной связи можно привлечь внимание посетителей и сделать страницу более продуманной.
Невероятно, как много начинок можно придумать, используя прозрачность в веб-дизайне. Это мощное свойство, которое необходимо учитывать при работе с CSS. Запомните, что для работы с прозрачностью можно использовать множество инструментов и элементов, и зависит от вашей фантазии, насколько далеко вы зайдете с этим свойством.
Шаг 10: Заключение
Мы надеемся, что этот пошаговый гайд помог вам разобраться в процессе создания прозрачного фона в HTML/CSS. Теперь вы знаете, что прозрачные фоны могут быть полезными во многих случаях, и как легко добавлять прозрачность на свой сайт.
Дополнительные ресурсы
Если вы хотите узнать больше о том, как улучшить ваши навыки HTML/CSS и стать профессионалом, то мы предлагаем вам следующие ресурсы:
Будьте на высоте и продолжайте изучать HTML и CSS!
Вопрос-ответ:
Как правильно задать фон у элемента в HTML/CSS?
Чтобы задать фон у элемента, можно использовать свойство background в CSS и указать адрес изображения, цвет или другую текстуру в качестве значения этого свойства. Например: background: url(‘адрес_изображения.png’);
Как сделать прозрачным только фон элемента, а не контент?
Для этого нужно задать свойству background-color значение rgba и указать прозрачность в альфа-канале (значение от 0 до 1). Например: background-color: rgba(255, 255, 255, 0.5); — в данном случае фон будет прозрачным на 50%, а контент элемента останется непрозрачным.
Как создать прозрачный фон у блока, который находится на картинке?
Для этого нужно использовать свойство background у блока и указать в нем url изображения с помощью значения background-image, а затем указать прозрачность с помощью значения background-color с применением альфа-канала (например, background-color: rgba(255, 255, 255, 0.5);).
Можно ли сделать прозрачным только часть фона элемента?
Да, для этого нужно воспользоваться свойством background-image и вместо картинки подставить градиент с прозрачной частью. Например: background-image: linear-gradient(to right, transparent 50%, #000000 50%); — таким образом, 50% фона элемента будет прозрачным.
Как сделать прозрачный фон у элемента только при наведении на него курсора?
Для этого используют псевдокласс :hover в CSS. Например: .element:hover — таким образом, при наведении курсора на элемент, его фон станет прозрачным на 50%.
color
Свойство, чтобы покрасить текст в разные цвета. Богатое разнообразие доступных значений.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Вадим Макеев ,
- Егор Левченко ,
- Светлана Коробцева
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство color задаёт цвет текста.
Пример
Скопировать ссылку «Пример» Скопировано
Наследует значение свойства color у ближайшего родителя, у которого оно указано:
.element color: currentColor;>.element color: currentColor; >
Задаёт значение по названию цвета:
.element color: red; color: orange; color: tan; color: rebeccapurple;>.element color: red; color: orange; color: tan; color: rebeccapurple; >
HEX-код цвета, 3- или 6-символьные для сплошных и 4- и 8-символьные для полупрозрачных:
.element color: #090; color: #009900; color: #090a; color: #009900aa;>.element color: #090; color: #009900; color: #090a; color: #009900aa; >
Значение RGB в старом синтаксисе rgb для сплошных и rgba для полупрозрачных:
.element color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6);>.element color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6); >
Значение RGB в новом синтаксисе rgb для сплошных и для полупрозрачных:
.element color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%);>.element color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%); >
Значение HSL в старом синтаксисе hsl для сплошных и hsla для полупрозрачных:
.element color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%);>.element color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%); >
Значение HSL в новом синтаксисе hsl для сплошных и для полупрозрачных:
.element color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%);>.element color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); >
Как понять
Скопировать ссылку «Как понять» Скопировано
Любому элементу веб-страницы можно задать свой цвета текста. Свойство color задаёт его для текста, а также для элементов его оформления, например, подчёркивания, линии над текстом, перечёркивания и других.
Чтобы задать фон текста, используйте свойство background — color , а рамки элемента можно раскрасить с помощью border — color .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Цвет можно задать с помощью названия цвета, в формате HEX, RGB, HSL или с помощью ключевых слов. Подробно о возможных значениях можно прочитать в статье «Цвета в вебе».
Название цвета
Скопировать ссылку «Название цвета» Скопировано
Можно использовать название цвета или его оттенка на английском из списка именованных цветов. Это базовый набор непрозрачных цветов, например, красный red , синий blue , оранжевый orange , чёрный black , тёмно-серый darkgray , светло-серый, lightgrey , белый white , а также смешанные цвета, вроде цвета морской волны lightseagreen , василькового cornflowerblue или томатного tomato .
HEX-код
Скопировать ссылку «HEX-код» Скопировано
Шестнадцатеричный код цвета в цветовой модели RGB, который начинается с # , например, #ff0000 . Сплошные цвета записываются в формате # R R G G B B или в сокращённом # R G B (если символы каждой группы одинаковые). Например #009900 или #090 . Если нужно указать прозрачность, она добавляется в конце в HEX-формате # R R G G B B A A или # R G B A , например #00990055 или #0905 .
Раньше нельзя было задать цвет в нотации # R G B A и приходилось использовать функцию rgba ( ) , но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию rgb ( ) , где прозрачность можно задать в дробях или процентах.
Формат RGB
Скопировать ссылку «Формат RGB» Скопировано
Для задания цвета используется функция rgb ( ) , например, rgb ( 0 63 255 ) для синего. Каждое из трёх значений отвечает за отдельный канал RGB и может быть записано числом от 0 до 255 или в процентах. Для добавления прозрачности, после записи каналов нужно поставить слэш и записать нужное значение от 0 до 1 или в процентах, например rgb ( 0 63 255 / 0 . 5 ) для полупрозрачного синего.
Раньше синтаксис RGB отличался от современного и вы всё ещё можете встретить его в коде или выбрать для лучшей кроссбраузерности, см. Can I use. Для разделения каналов внутри функции нужно было использовать запятые rgb ( 0 , 63 , 255 ) , а для добавления прозрачности — специальную функцию rgba ( ) , которая принимала последним параметром прозрачность цвета, например rgba ( 255 , 0 , 0 , 0 . 5 ) .
Формат HSL
Скопировать ссылку «Формат HSL» Скопировано
Цветовая модель HSL описывает те же цвета, что и HSL, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl ( 120 100 % 50 % ) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единицы 120deg , второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb , с помощью слэша со значением, например hsl ( 120 100 % 50 % / 0 . 5 ) полупрозрачный зелёный.
Синтаксис hsl ( ) отличался от современного точно так же, как rgb ( ) : нужны были запятые и специальная функция hsla ( ) для задания прозрачности цвета. Используйте старый синтаксис для лучшей совместимости и не удивляйтесь, если встретите его в коде.
Ключевые слова
Скопировать ссылку «Ключевые слова» Скопировано
Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb ( 0 0 0 / 0 ) , но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.
Полезные ссылки
Скопировать ссылку «Полезные ссылки» Скопировано
Лучше всегда доверять выбор цвета профессионалам, но иногда мы делаем проект для себя и нам нужно сделать хорошую подборку цветов для проекта. В этом случае лучше всего не изобретать велосипед, а воспользоваться уже подходящими опенсорсными подборками:
- Material Design Color System
- Ubuntu Color System
- Color Hex Color Codes
- RGBto
- Colormind
Или создать что-то своё, но под руководством профессионалов. Например:
И отдельно присмотритесь к сервисам, которые умеют подбирать безопасные цвета для людей с особенностями их восприятия:
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Ничего лучше чёрного текста на белом фоне пока не придумали. Или белого на чёрном, если читаешь ночью. Убедись, что цвет текста выглядит контрастно на заданном фоне, лучше даже проверить.
�� Свойство цвета можно анимировать при помощи transition ��
�� Если вам нужно задать полупрозрачный текст, используй значение с указанием альфа-канала. Не используй для этих целей opacity . Иначе при добавлении в элемент другого контента, например, иконки, он тоже станет полупрозрачным. Это, скорее всего, не входило в ваши планы.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Цвет текста — наследуемое свойство. Если на странице преобладает какой-то цвет, то его можно задать для селектора html . В этот цвет будет автоматически окрашен весь текст на странице.
�� Ключевое слово current Color нужно, чтобы использовать текущий или унаследованный цвет текста в других местах, где можно указать цвет фона, рамки и прочего, например:
Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока наследуют цвет от текста. Блок выше �� тоже наследует фоновый цвет от текста, для которого задано свойство «color».div class="parent"> Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока наследуют цвет от текста. div class="child">div> Блок выше �� тоже наследует фоновый цвет от текста, для которого задано свойство «color». div>
.parent color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;> .child background: currentColor; height: 110px;>.parent color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; > .child background: currentColor; height: 110px; >