Повысить контраст шрифтов на фоне с прозрачностью

@Satansoft · Регистрация: 27.02.2012

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

Порой приходится прозрачность задавать фону через opacity и вместе с этим тускнеют и шрифты в дочерних контейнерах, есть ли возможность повысить контраст шрифтов на фоне с прозрачностью 0.6? Сделано так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.overlay {
            width: 214px;
            height: 49px;
            opacity: 0.6;
            background-color: $second-color;
            border-radius: 3px;
            position: absolute;
            font-family: $main-font;
            top: 70%;
            left: 50%;
            margin-left: -107px;
            line-height: 25px;
            padding-left: 10px;
            & .top {
                color: #f6f6f6;
                font-size: 13px;
                font-weight: 400;
            }
            & .bottom {
                font-size: 11px;
                font-weight: 400;
                line-height: 18px;
                color: #676767;
                & span {
                    color: #ffc14c;
                }
            }
        }

@Aqua77 · 16.02.2017, 21:41

Вместо opacity Можно фон прозрачный просто сделать через rgba

@Satansoft · 16.02.2017, 21:43 **[ТС]**

Сообщение от Aqua77

Вместо opacity Можно фон прозрачный просто сделать через rgba

Не всегда это получается, а конвертить hex в rgba здорово отвлекает.

@Aqua77 · 16.02.2017, 21:47

Добавлено через 3 минуты

Сообщение от Satansoft

есть ли возможность повысить контраст шрифтов

Тогда нет. Только:
а) Избавиться от наследования;

б) Избавиться от opacity, заменив его rgba(...) для фона.

@Satansoft · 16.02.2017, 21:49 **[ТС]**

Сообщение от Aqua77

а) Избавиться от наследования;

Я пробовал переопределить для дочерних контейнеров...

opacity: 1

opacity : none

всё не то...

@Aqua77 · 16.02.2017, 21:52

Сообщение от Satansoft

всё не то...

А я о чём... rgba самый простой подход

@Satansoft · 16.02.2017, 21:54 **[ТС]**

Сообщение от Aqua77

А я о чём...

А если надо один и тот же цвет в нескольких местах, но с разной прозрачностью, w3c об этом не задумывались?

@Aqua77 · 16.02.2017, 21:57

Сообщение от Satansoft

цвет в нескольких местах, но с разной прозрачностью

Для этого и есть rgba

@mrtoxas · 16.02.2017, 22:52

Сообщение от Satansoft

Не всегда это получается, а конвертить hex в rgba здорово отвлекает.

Можно самому не конвертировать. Какой препроцессор вы используете?

CSS
1
2
3
4
5
6
7
/*SCSS Code*/
 
$second-color: #005500;
 
.overlay{
    background-color: rgba($second-color, 0.6);
}

@Satansoft · 16.02.2017, 22:56 **[ТС]**

Сообщение от mrtoxas

Можно самому не конвертировать. Какой препроцессор вы используете?

SASS

Добавлено через 2 минуты

Сообщение от mrtoxas

background-color: rgba($second-color, 0.6);

Приятно удивлён, что это функционально ^^

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	16.02.2017, 21:41
	Вместо opacity Можно фон прозрачный просто сделать через rgba 0

Повысить контраст шрифтов на фоне с прозрачностью

Решение