渐变的应用

最新推荐文章于 2023-04-20 16:17:55 发布

路伊-Ran

最新推荐文章于 2023-04-20 16:17:55 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/weixin_42789120/article/details/84500697

版权

学习渐变有背景的重复background-image:linear-gradient(45deg, red 25%,transparent 25% ), l inear-gradient(-45deg,red 25%, transparent 25%), linear-gradient(45deg,transparent 75%,red 75%), linear-gradient(-45deg, transparent 75%,red 75%);
有透明的两种方式rgba, transparent
渐变配合background-size可以有多种效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    div{
        width: 800px; height: 500px; background-color:#abcdef;background-size:100px 100px;
        background-image:-webkit-linear-gradient(45deg, red 25%,transparent 25% ),
                         -webkit-linear-gradient(-45deg,red 25%, transparent 25%),
                         -webkit-linear-gradient(45deg,transparent 75%,red 75%),
                         -webkit-linear-gradient(-45deg, transparent 75%,red 75%);
        background-image:-moz-linear-gradient(45deg, red 25%,transparent 25% ),
                         -moz-linear-gradient(-45deg,red 25%, transparent 25%),
                         -moz-linear-gradient(45deg,transparent 75%,red 75%),
                         -moz-linear-gradient(-45deg, transparent 75%,red 75%);

        background-image:-o-linear-gradient(45deg, red 25%,transparent 25% ),
                         -o-linear-gradient(-45deg,red 25%, transparent 25%),
                         -o-linear-gradient(45deg,transparent 75%,red 75%),
                         -o-linear-gradient(-45deg, transparent 75%,red 75%);

        background-image:linear-gradient(45deg, red 25%,transparent 25% ),
                         linear-gradient(-45deg,red 25%, transparent 25%),
                         linear-gradient(45deg,transparent 75%,red 75%),
                         linear-gradient(-45deg, transparent 75%,red 75%);



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

用background-size②没有用重复的效果做出来，非常好看