Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS

Die Titelbilder in den Spalten von Zhihu Discovery werden im Allgemeinen wie unten gezeigt angezeigt. Dies wird offensichtlich durch Farbverläufe erreicht. Die Idee ist sehr interessant, vor allem zwei Aspekte der Erkenntnis zu berücksichtigen:

Dieses Bild kann tatsächlich in zwei Teile unterteilt werden. Die rechte Seite steuert die Grafiken und den Farbverlauf, und die linke Seite ist ein einfarbiger Hintergrund, der nichts mit dem Farbverlauf zu tun hat.

Transparent ist auch eine Farbe und kann als Farbverlauf eingestellt werden

Ich werde meinen eigenen Code unten nur als Referenz posten.

Layout

<Text>
    <div Klasse="bg-gradient">
        <div Klasse="Bild"></div> 
    </div>
</body>

CSS-Stile

<Stil>
        .bg-Farbverlauf {
            Rand: 0 automatisch;
            Hintergrund: rgb(244, 195, 77);
            Position: relativ;
            Breite: 600px;
            Höhe: 350px;
        }

        .bg-Farbverlauf .pic{
            Hintergrundbild: linearer Farbverlauf (nach rechts, rgb (244, 195, 77), transparent), URL ("bg.jpg");
            Hintergrundposition: Mitte;
            Hintergrund-Mischmodus: normal;
            Position: absolut;
            Höhe: 100%;
            Breite: 250px;
            rechts: 0;
        }
</Stil>

Der endgültige Effekt ist wie folgt

Das Obige ist mein Code, danke fürs Anschauen.

p.s.: Wenn du etwas hineinschreiben willst und etwas schief geht, ist das meiner Meinung nach kein Problem. Nun, das ist dein Problem. Hören Sie mir zu, Sie müssen es selbst lösen. (Explizite Wörter)