Example code for implementing transparent gradient effects with CSS

The title images on Zhihu Discovery columns are generally displayed as shown below. Obviously, it is achieved using gradients. The idea is very interesting, mainly to have two aspects of cognition:

This picture can actually be divided into two parts. The right side controls the graphics and gradient, and the left side is a solid color background that has nothing to do with the gradient.

Transparent is also a color, and can be set as a gradient

I'll post my own code below for reference only.

layout

<body>
    <div class="bg-gradient">
        <div class="pic"></div> 
    </div>
</body>

CSS Styles

<style>
        .bg-gradient {
            margin: 0 auto;
            background: rgb(244, 195, 77);
            position: relative;
            width: 600px;
            height: 350px;
        }

        .bg-gradient .pic{
            background-image: linear-gradient(to right, rgb(244, 195, 77), transparent), url("bg.jpg");
            background-position: center;
            background-blend-mode: normal;
            position: absolute;
            height: 100%;
            width: 250px;
            right: 0;
        }
</style>

The final effect is as follows

The above is my code, thanks for watching.

ps: If you want to write something in it and something goes wrong, I don’t think it’s a problem. Well, that’s your problem. Listen to me, you have to solve it on your own. (Explicit words)

<<: How to use jsonp in vue

>>: The neglected special effects of META tags (page transition effects)

Let's talk about the storage engine in MySQL

Example code for implementing transparent gradient effects with CSS

Let's talk about the storage engine in MySQL

How to hide elements on the Web and their advantages and disadvantages

This article will show you the basics of JavaScript: deep copy and shallow copy

What is the function of !-- -- in HTML page style?

Example code for implementing the nine-grid layout of dynamic images with CSS

Commonly used JavaScript array methods

Introduction to the use of common Dockerfile commands

Docker container regularly backs up the database and sends it to the specified mailbox (design idea)

Learn the principles and common operations of MySQL partition tables through examples

Analysis of the advantages and disadvantages of MySQL stored procedures

Recommend

Professional MySQL development design specifications and SQL writing specifications

How to view and clean up Docker container logs (tested and effective)

How to solve the slow speed of MySQL Like fuzzy query

MySQL latest version 8.0.17 decompression version installation tutorial

MySQL series 15 MySQL common configuration and performance stress test

Solution to the problem that the MySQL database cannot be accessed by other IP addresses

How to use docker compose to build fastDFS file server

Solution to define the minimum height of span has no effect

Example of how to configure multiple virtual hosts in nginx

This article helps you understand PReact10.5.13 source code

Summary of basic usage of $ symbol in Linux

Lambda expression principles and examples

Linux disk sequential writing and random writing methods

Detailed explanation of the "/" problem when proxy_pass forwards according to the path path

How to install Zookeeper service on Linux system