Maskieren Sie das Bild, erstellen Sie Rechteck aus mehreren Gradienten ⇐ CSS

[Anonymous]

Ich habe einen radialen Gradienten, der als Maskenbild "verblasst" ein Bild in die Hintergrundfarbe hinter das Bild verwendet.

Code: Select all

mask-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 1%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
< /code>

Wie erhalte ich mit einem gleichmäßigen rechteckigen Gradienten auf allen vier Seiten den gleichen Effekt?img
{
mask-image:
linear-gradient(to top, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to right, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to bottom, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%),
linear-gradient(to left, rgba(255,255,255,1) 1%, rgba(255,255,255,1) 50%);
}