Color transparent css: html — Transparent CSS background color

Сброс CSS Tailwind приводит к тому, что фон главной кнопки становится белым — Вопросы / Помощь

предложения (админ) 22 июня 2022 г., 18:31

#1

Привет, ребята!

Сброс CSS Tailwind приводит к тому, что цвет фона по умолчанию для основной кнопки CTA становится белым, из-за чего кнопка выглядит странно, а текст становится нечитаемым. При наведении на кнопку фон становится синим, как и ожидалось.

Снимок экрана 2022-06-22, 20.05.522142×1430 170 КБ

Я подготовил публичный код для демонстрации поведения:

Arkadii_Kulikov (Аркадий Куликов) 24 июня 2022 г., 7:45

#2

Эй, спасибо за отчет. Мы рассмотрим это.

нд0ут (Алексей Гренишин) 25 июня 2022 г., 8:56

#3

Hey @proposales,

Это известная ошибка/особенность предварительной проверки попутного ветра, см. сброс кнопки предварительной проверки в версии 3, несовместимой с версией 2 · Проблема № 6602 · tailwindlabs/tailwindcss · GitHub

Я бы предложил использовать пользовательскую предварительную сборку без фона -цвет: прозрачный , как кто-то сказал в комментариях.

Или вы можете переопределить стили кнопок после предварительного импорта, например:

 .uploadcare--button_primary {
  фон: #157cfc;
}
 

Джей

16 ноября 2022 г. , 2:29

#4

У меня точно такая же проблема, и я попытался добавить

.uploadcare—button_primary { фон: #157cfc; } на страницу, но это не сработало, как я могу просто изменить HTML-страницу, чтобы это работало?

Аркадий Куликов (Аркадий Куликов) 16 ноября 2022 г., 6:23

#5

Привет, Джей. Этот обходной путь должен быть рабочим вариантом. Не могли бы вы поделиться ссылкой на страницу, которую вы создаете, если она уже есть в Интернете?

Джей 22 ноября 2022 г., 1:44

#6

извините, только что увидел это, да ссылка здесь: 88stacks
мне пришлось закомментировать часть попутного ветра, чтобы страница вообще работала, так что вы не видите здесь ошибки,. плохо получить workalone вариант вверх.

Использование метода затухания LESS CSS для применения непрозрачности к шестнадцатеричному цвету

Когда я определяю цвета в своих CSS (каскадных таблицах стилей), я использую шестнадцатеричные значения. Как #FF0099. Для меня это знакомо, легко читать и рассуждать. Единственный раз, когда я когда-либо переключался с нотации HEX на нотацию RGB, это когда мне нужно добавить альфа-канал для непрозрачности. Однако недавно, слушая подкаст Syntax Podcast по CSS, Уэс Бос преподнес мне вкусный подарок: LESS — мой любимый препроцессор CSS — имеет метод fade(), который позволит мне применить непрозрачность к шестнадцатеричному значению, в результате чего в нотации RGBa. Это круто!

Запустите эту демонстрацию в моем проекте JavaScript Demos на GitHub.

Чтобы увидеть это в действии, я собрал крошечную демонстрацию Angular 4, которая визуализирует несколько «выцветших» блоков поверх изображения. В этом случае я использую Angular, потому что это легко в моей локальной настройке; но в использовании fade() нет ничего, что требует Angular — вам просто нужен какой-то конвейер, который будет обрабатывать ваши файлы LESS и генерировать файлы CSS. Вот моя разметка HTML:

 // Импорт основных сервисов angular.
импортировать {Компонент} из "@angular/core";
@Компонент({
селектор: "мое-приложение",
styleUrls: [ "./app.component.less" ],
шаблон:
`
<дел>