Maskieren Sie das Bild, erstellen Sie Rechteck aus mehreren Gradienten

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: Maskieren Sie das Bild, erstellen Sie Rechteck aus mehreren Gradienten

by Anonymous » 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%);
}

Top