.pencil-effect { background-image: url(photo.jpg); background-size: cover; background-position: center; } @supports (filter: invert(1)) and (background-blend-mode: difference) { .pencil-effect { background-image: url(photo.jpg), url(photo.jpg); background-blend-mode: difference; background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(2) invert(1) g
![驚きのクオリティで画像にエフェクトが適用できる、CSSのブレンドモードを使った実装テクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/655996312081cfcbbdab5800c114e5b994456477/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016112901.jpg)