Graduierung der Hintergrundopazität von innen nach außen ⇐ HTML

[Anonymous]

Ich möchte einen Deckkraftverlaufseffekt für den Hintergrund eines Elements erhalten, vom Hintergrund dieses Elements zum Hintergrund seines übergeordneten Elements.
Es fällt mir schwer, das gewünschte Ergebnis in Worten zu erklären, deshalb habe ich mir den folgenden Ausschnitt ausgedacht. Meistens macht es das, was ich will, aber

• Es scheint zu kompliziert zu sein.
• Es funktioniert nur, wenn der Hintergrund des untergeordneten Elements nur eine bestimmte Farbe hat. Weiß in diesem Beispiel.

Ich frage mich also, ob es einen besseren Weg gibt ... Grundsätzlich möchte ich die Hintergrundopazität des Pixels eines Elements vom „Abstand von diesem Pixel zum nächsten Rand des Elements“ abhängig machen ...

Code: Select all

.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
}

Code: Select all

example