Изменение непрозрачности фона изнутри наружу ⇐ Html

[Anonymous]

Мне хотелось бы получить эффект градиента непрозрачности фона элемента, от фона этого элемента к фону его родительского элемента.
Мне сложно объяснить желаемый результат словами, поэтому я придумал фрагмент ниже. В основном он делает то, что я хочу, но

• Это кажется слишком сложным.
• Это работает только тогда, когда фон дочернего элемента имеет только определенный цвет. В этом примере белый цвет.

Поэтому мне интересно, есть ли лучший способ... По сути, я хотел бы, чтобы непрозрачность фона пикселя элемента зависела от «расстояния от этого пикселя до ближайшего края элемента»...

Код: Выделить всё

.fading-background {
--border-radius: 6px;
--gradient-length: calc(var(--border-radius));
border-radius: var(--border-radius);
padding-left: var(--border-radius);
padding-right: var(--border-radius);

background:
radial-gradient(circle at bottom right, white, rgba(0, 0, 0, 0) var(--gradient-length)),
radial-gradient(circle at bottom left, white, rgba(0, 0, 0, 0) var(--gradient-length)),
radial-gradient(circle at top left, white, rgba(0, 0, 0, 0) var(--gradient-length)),
radial-gradient(circle at top right, white, rgba(0, 0, 0, 0) var(--gradient-length)),

linear-gradient(to right, white),

linear-gradient(to top, rgba(0, 0, 0, 0), white var(--gradient-length)),
linear-gradient(to bottom, rgba(0, 0, 0, 0), white var(--gradient-length)),
linear-gradient(to right, rgba(0, 0, 0, 0), white var(--gradient-length)),
linear-gradient(to left, rgba(0, 0, 0, 0), white var(--gradient-length));
background-size:
var(--gradient-length) var(--gradient-length),
var(--gradient-length) var(--gradient-length),
var(--gradient-length) var(--gradient-length),
var(--gradient-length) var(--gradient-length),

calc(100% - 2 * var(--gradient-length)) calc(100% - 2 * var(--gradient-length)),

calc(100% - 2 * var(--gradient-length)) var(--gradient-length),
calc(100% - 2 * var(--gradient-length)) var(--gradient-length),
var(--gradient-length) calc(100% - 2 * var(--gradient-length)),
var(--gradient-length) calc(100% - 2 * var(--gradient-length));
background-position:
0 0,
100% 0,
100% 100%,
0 100%,

center,

bottom,
top,
left,
right;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,

no-repeat,

no-repeat,
no-repeat,
no-repeat,
no-repeat;
}

.parent-style {
background: linear-gradient(red, blue);
text-align: center;
font-size: 50px
}

Код: Выделить всё

example

Подробнее здесь: https://stackoverflow.com/questions/797 ... inside-out