<
div
class=
"all pencil-effect"
id=
"all"
>
<
img
src=
"./image/2.jpg"
>
</
div
>
.pencil-effect {
margin:
10px
20px
20px;
}
.pencil-effect img {
width:
100%;
vertical-align:
top
!important;
margin:
0
!important;
visibility:
hidden
!important;
opacity:
0;
}
.pencil-effect {
background-image:
url(
./image/2.jpg);
background-size:
cover;
background-position:
center;
}
@supports (
filter:
invert(
1)) and (
background-blend-mode:
difference,
screen) {
.pencil-effect {
background-image:
url(
./image/2.jpg),
url(
./image/2.jpg),
url(
./image/2.jpg);
background-blend-mode:
difference,
screen;
-webkit-background-blend-mode:
difference,
screen;
-moz-background-blend-mode:
difference,
screen;
-ms-background-blend-mode:
difference,
screen;
-o-background-blend-mode:
difference,
screen;
background-repeat:
no-repeat;
background-position:
calc(
50% -
1px)
calc(
50% -
1px),
calc(
50% +
1px)
calc(
50% +
1px),
center;
filter:
brightness(
2)
invert(
1)
grayscale(
1);
}
}