CSS彩铅效果示例程序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课-CSS彩铅效果示例程序</title>
    <style>
        .colored-pencil-effect {
          background-image: url(/u/201909/mysnvmktgl.jpg);
          background-size: cover;
          background-position: center;
        }

@supports (filter: invert(1)) and (mix-blend-mode: color) {
          .colored-pencil-effect {
            position: relative;
          }
          .colored-pencil-effect:before, .colored-pencil-effect:after {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            box-shadow: inset 0 0 0 1px black;
          }
          .colored-pencil-effect:before {
            background-image: url(/u/201909/mysnvmktgl.jpg), url(/u/201909/mysnvmktgl.jpg);
            background-blend-mode: difference;
            background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
            filter: brightness(2) invert(1) grayscale(1);
          }
          .colored-pencil-effect:after {
            background: inherit;
            mix-blend-mode: color;
          }
        }
    </style>
</head>
<body>
<div class="colored-pencil-effect" style="width:680px;height:450px;max-width:100%;"></div>
</body>
</html>