CSS делает абсолютно позиционированный элемент HTML непрозрачным без установки цвета фона
У меня есть HTML, который выглядит так:
<html>
<head>
<style>
.globalpopup {
margin: 0px;
padding: 2px;
position: absolute;
opacity: 1;
background: inherit;
}
</style>
</head>
<body>
<table class = "globalpopup"><tr><td><span>!!</span></td></tr>
</table>
<div>This is a document. There's a ton of stuff here.
</body>
</html>
Фон таблицы прозрачен, хотя фон текста внутри нее (тег span) непрозрачен.
Как сделать таблицу полностью непрозрачной, не устанавливая цвет фона? Нигде нет установленных цветов; используются настройки браузера по умолчанию. Если вы думаете, что знаете настройки браузера по умолчанию, то это не так.
Копирование цвета фона из тела с помощью JavaScript не помогло. document.body.style.backgroundColor — пустая строка.
Некоторое время назад кто-то задал аналогичный вопрос и получил ответ background: inherit. Этот случай как-то другой и backgorund: inherit не работает.
вы также можете получить вычисленный цвет фона, посмотрите этот ответ
@BrettDonald: Потому что лучше вообще не устанавливать цвета и просто наследовать настройки браузера по умолчанию. Я один из пользователей с инвертированными настройками по умолчанию. Как только я устанавливаю один цвет, болезнь распространяется по всей странице.
Ответы 1
Корневой цвет доступен через значение цвета Canvas:
.globalpopup {
margin: 0px;
padding: 2px;
position: absolute;
opacity: 1;
background: Canvas;
}<table class = "globalpopup"><tr><td><span>!!</span></td></tr></table>
<div>This is a document. There's a ton of stuff here.И если кто-то хочет получить к нему доступ через JS, он может добавить элемент с этим установленным где-то значением цвета и получить вычисленное значение:
const getCanvasColor = () => {
const tester = document.createElement("span");
tester.style.color = "Canvas";
document.body.append(tester);
const computed = getComputedStyle(tester).color;
tester.remove();
return computed;
}
console.info(getCanvasColor());Ок, вау. Это действительно так тривиально; сразу за поиском в Google из-за безудержных блогов с одними и теми же повторяющимися плохими советами, включая мою самую большую неприятность - просто установить цвет фона, а не переднего плана.
Пожалуйста, отредактируйте свой вопрос, чтобы сделать его более понятным. Я не понимаю, что «текст внутри него непрозрачен» - вы говорите о самом тексте (на переднем плане) или о фоне? Единственный способ сделать таблицу непрозрачной — установить цвет фона. Почему вы не хотите этого делать? Вы можете установить фон тела того же цвета, что и фон таблицы, если вы не доверяете настройкам браузера по умолчанию.