Use CSS3 background control properties + color transition to achieve gradient effect

css3 background image related

Compatibility: IE9+

background-clip background image drawing area

background-clip:border-box; content area

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:content-box;
        /*background-clip:padding-box;*/
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-clip:padding-box; padding area

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) center;
        padding:50px;
        border:50px solid transparent;
        background-clip:padding-box;
        /*background-clip:border-box;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-clip:border-box; border area

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:border-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-origin: content-box | padding-box | border-box; starting position of the background image

The background image is offset 50px horizontally and vertically downward from the border-box.

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:padding-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

The background image is offset 50px horizontally and vertically downward from the padding-box

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p3.jpg) 50px 50px no-repeat;
        padding:50px;
        border:50px solid transparent;
        background-origin:content-box;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

The background image is offset 50px horizontally and vertically downward from the content-box

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p2.jpg) 50px 50px no-repeat;
        background-size:100%;/*The width is 100% of the container width, and the height is proportional to the image*/
        background-size:100% 100%;/*The width is 100% of the container width, and the height is 100% of the container height*/
        background-size:cover;
        background-size:contain;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

background-size: When filling in a numeric value or percentage, if you only fill in one value, the other value defaults to auto

cover fills the container with proportional scaling

contain scales proportionally until one side touches the edge of the container

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:url(source/p2.jpg) 50px 50px no-repeat;
        background-size:100%;/*The width is 100% of the container width, and the height is proportional to the image*/
        background-size:100% 100%;/*The width is 100% of the container width, and the height is 100% of the container height*/
        background-size:cover;
        background-size:contain;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

Multiple background images

background-image:url(),url();

The previous image will cover the next image.

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background-image:url(source/shuiyin.png), url(source/cat.jpg);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

Set the color to transparent: transparent

CSS3 Gradient

Compatibility: IE10

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(pink, orange, #abcdef);/*The default is vertical*/
        background: -moz-linear-gradient(pink, orange, #abcdef);/*The default is vertical*/
        background: -o-linear-gradient(pink, orange, #abcdef);/*The default is vertical*/
        background: linear-gradient(pink, orange, #abcdef);/*The default is vertical*/

        background:-webkit-linear-gradient(left, pink, orange, #abcdef);/*from left to right*/
        background: -moz-linear-gradient(right, pink, orange, #abcdef);
        background: -o-linear-gradient(right, pink, orange, #abcdef);
        background: linear-gradient(to right, pink, orange, #abcdef);

        background:-webkit-linear-gradient(left top, pink, orange, #abcdef);/*from top left to bottom right*/
        background: -moz-linear-gradient(right bottom, pink, orange, #abcdef);
        background: -o-linear-gradient(right bottom, pink, orange, #abcdef);
        background: linear-gradient(to right bottom, pink, orange, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

The angle of the normal linear gradient

Angle of linear gradient under webkit kernel

Solution: The prefixes of compatible browsers are written in order, and the ones without prefixes are normally placed at the end.

Colors can be assigned specific positions

If the first color is not specified, it will be at 0% by default; the last color will be at 100% by default

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(45deg, pink, orange, #abcdef);/*Specific angle representation*/
        background: -moz-linear-gradient(45deg, pink, orange, #abcdef);
        background: -o-linear-gradient(45deg, pink, orange, #abcdef);
        background: linear-gradient(45deg, pink, orange, #abcdef);

        background:-webkit-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background: -moz-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background: -o-linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
        background: linear-gradient(90deg, orange, pink 30%, purple 70%, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

rgba() can set a gradient with transparent color

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));/*Specific angle representation*/
        background: -moz-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background: -o-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));
        background: linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1));

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

Repeating Gradient

repeating-linear-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 500px;
        height: 500px;
        background:-webkit-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background: -moz-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background: -o-repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);
        background: repeating-linear-gradient(90deg, rgba(255,0,0,0), rgba(255,0,0,1) 20%);

    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

radial-gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(pink, #abcdef);
        background: -moz-radial-gradient(pink, #abcdef);
        background: -o-radial-gradient(pink, #abcdef);
        background: radial-gradient(pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

Keep the circular gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 400px;
        height: 200px;
        border-radius:50%;
        background:-webkit-radial-gradient(circle, pink, #abcdef);
        background: -moz-radial-gradient(circle, pink, #abcdef);
        background: -o-radial-gradient(circle, pink, #abcdef);
        background: radial-gradient(circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

Size closest-side closest-corner farthest-side farthest-corner

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        border-radius:50%;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/* background:-webkit-radial-gradient(circle, pink, #abcdef);
        background: -moz-radial-gradient(circle, pink, #abcdef);
        background: -o-radial-gradient(circle, pink, #abcdef);
        background: radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(closest-side circle, pink, #abcdef);
        background: -moz-radial-gradient(closest-side circle, pink, #abcdef);
        background: -o-radial-gradient(closest-side circle, pink, #abcdef);
        background: radial-gradient(closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(closest-corner circle, pink, #abcdef);
        background: -moz-radial-gradient(closest-corner circle, pink, #abcdef);
        background: -o-radial-gradient(closest-corner circle, pink, #abcdef);
        background: radial-gradient(closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(farthest-side circle, pink, #abcdef);
        background: -moz-radial-gradient(farthest-side circle, pink, #abcdef);
        background: -o-radial-gradient(farthest-side circle, pink, #abcdef);
        background: radial-gradient(farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(farthest-corner circle, pink, #abcdef);
        background: -moz-radial-gradient(farthest-corner circle, pink, #abcdef);
        background: -o-radial-gradient(farthest-corner circle, pink, #abcdef);
        background: radial-gradient(farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

Set the center position of the gradient

10% of the width horizontally and 20% of the height vertically

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
/* background:-webkit-radial-gradient(circle, pink, #abcdef);
        background: -moz-radial-gradient(circle, pink, #abcdef);
        background: -o-radial-gradient(circle, pink, #abcdef);
        background: radial-gradient(circle, pink, #abcdef);*/
    }
    div:nth-child(1){
        background:-webkit-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background: -moz-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background: -o-radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
        background: radial-gradient(10% 20%, closest-side circle, pink, #abcdef);
    }
    div:nth-child(2){
        background:-webkit-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background: -moz-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background: -o-radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
        background: radial-gradient(10% 20%, closest-corner circle, pink, #abcdef);
    }
    div:nth-child(3){
        background:-webkit-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background: -moz-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background: -o-radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
        background: radial-gradient(10% 20%, farthest-side circle, pink, #abcdef);
    }
    div:nth-child(4){
        background:-webkit-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background: -moz-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background: -o-radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
        background: radial-gradient(10% 20%, farthest-corner circle, pink, #abcdef);
    }
</style>
</head>
<body>
    <div>closest-side</div>
    <div>closest-corner</div>
    <div>farthest-side</div>
    <div>farthest-corner</div>
</body>
</html>

repeating-radial-gradient Repeating radial gradient

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background: -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background: repeating-radial-gradient(circle, pink, #abcdef 20%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

IE browser gradient

IE10+ supports gradient

IE6-8 use filter

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 200px;
        height: 100px;
        margin-bottom:50px;
        line-height: 100px;
        text-align: center;
        background:-webkit-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background: -moz-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background: -o-repeating-radial-gradient(circle, pink, #abcdef 20%);
        background: repeating-radial-gradient(circle, pink, #abcdef 20%);
        filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=pink,endcolorstr=#abcdef,gradientType=1);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>

Use IE console to switch IE browser version

IE filter

0 Linear gradient from left to right

1 Linear gradient from top to bottom

Actual case:

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        width: 600px;
        height: 300px;
        background-color:#abcdef;
        background-size:100px 100px;
        background-image:-webkit-linear-gradient(45deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -webkit-linear-gradient(45deg, transparent 75%, pink 75%),
                         -webkit-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:-moz-linear-gradient(45deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -moz-linear-gradient(45deg, transparent 75%, pink 75%),
                         -moz-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:-o-linear-gradient(45deg, pink 25%, transparent 25%),
                         -o-linear-gradient(-45deg, pink 25%, transparent 25%),
                         -o-linear-gradient(45deg, transparent 75%, pink 75%),
                         -o-linear-gradient(-45deg, transparent 75%, pink 75%);
        background-image:linear-gradient(45deg, pink 25%, transparent 25%),
                         linear-gradient(-45deg, pink 25%, transparent 25%),
                         linear-gradient(45deg, transparent 75%, pink 75%),
                         linear-gradient(-45deg, transparent 75%, pink 75%);
    }

</style>
</head>
<body>
    <div></div>
</body>
</html>