linear-gradient () function to create a linear gradient "image"
Its syntax is
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction
Specified gradient direction with angular values
Orientation values: it is common to top, to bottom, to left, to right, to right top, etc.
Angle values: commonly used 0deg, 180deg etc.
color-stop1
color
Keyword red, rgba other color values (transparent may also be provided)
stop
This area is the end position of the color blocks, in other words, this accounts for the color
ps: at least two color values
Angle value
Let's look at a picture of the document
0deg not by a mathematical point us to the right definition of default direction is upward, from the direction of true north, so north is 0deg,
.back{
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: linear-gradient(90deg,#02a0ff,red);
}
When is 90deg, gradient line direction corresponds to right, from left to right
When in 135deg, gradient line direction corresponds to right bottom, lower right point on the left, the opposite is -135, a lower left point to the right
Color - end position
This value is a <color> value composition, followed by an optional stop position
Color gradient is above both cases, a very uniform area occupied, equivalent to background: linear-gradient (-135deg, # 02a0ff 0%, red 100%), the proportion of 0-100% are from the end of
So this area can be modified
As shown above, the modified parameters
background: linear-gradient(180deg,#02a0ff 20%,red 80%);
20% of the area corresponding to the first color, the first color is a white arrow 1 2 Initial color gradient, and finally to a white arrow indicates the completion of the gradient
We will find that the top 20% and bottom 20% is not graded, so we can understand 20% of the starting position 1 color, 2 color 80% of the end position.
We changed the value of the color value greater than 1 is behind the color, to give the following results
background: linear-gradient(180deg,#02a0ff 60%,red 20%);
Color 1 and Color 2 is not directly cast a shadow, so the shadow is generated in the inside of the section
Make a triangle cover picture
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.box img{
display: block;
}
.back{
width: 330px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: linear-gradient(135deg,transparent 50%,red 50%);
}
<div class="box">
<div class="back"></div>
<img src="./img/dflmg.jpg">
</div>
先记录到这里。