Maskieren Sie das Bild, erstellen Sie Rechteck aus mehreren Gradienten
Posted: 22 May 2025, 22:15
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%);
}