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) |
>>: The neglected special effects of META tags (page transition effects)
Recommend
js to create a carousel effect
I think the carousel is a relatively important po...
Application example tutorial of key in Vue page rendering
introduction During the front-end project develop...
Several ways to improve the readability of web pages
1. Use contrasting colours. The contrast here ref...
Four ways to create objects in JS
Table of contents 1. Create objects by literal va...
How to use LibreOffice to convert document formats under CentOS
Project requirements require some preprocessing o...
A complete list of commonly used shared codes for web pages (essential for front-end)
Copy code The code is as follows: 1. Sina Weibo &...
Analysis of the reasons why MySQL's index system uses B+ tree
Table of contents 1. What is an index? 2. Why do ...
How to implement draggable components in Vue
This article shares with you how to implement dra...
Detailed explanation of the process of nginx obtaining the real source IP after passing through multiple layers of proxy
question Nginx takes $remote_addr as the real IP ...
The reason why MySQL manually registers the binlog file and causes master-slave abnormalities
1. Source of the problem A friend @水米田 asked me a...
How to open the port in Centos7
The default firewall of CentOS7 is not iptables, ...
Exploring the practical value of the CSS property *-gradient
Let me first introduce an interesting property - ...
About the layout method of content overflow in table
What is content overflow? In fact, when there is ...
Detailed tutorial on installation and configuration of compressed version of MySQL database
Table of contents 1. Download MySQL 2. Unzip the ...
How to open a page in an iframe
Solution: Just set the link's target attribute...