用CSS实现各种图片滤镜效果演示

.pencil-effect {

$url : url(photo.jpg);

background-image: $url; 

background-size: cover; 

background-position: center; 

@supports (filter: invert(1)) and (background-blend-mode: difference) { 

background-image: $url, $url; 

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); 

box-shadow: inset 0 0 0 1px black; 

} 

}

.emboss-effect{

$url:url(photo.jpg);

background-image:$url;

background-size:cover;

background-position:center;

@supports (filter: invert(1)) and (background-blend-mode:difference, screen){

background-image:$url,$url,$url;

background-blend-mode:difference, screen;

background-position:

calc(50%-1px)calc(50%-1px),

calc(50%+1px)calc(50%+1px), 

 center;

filter: brightness(2) invert(1) grayscale(1);

}

}

.colored-chalkboard-effect {

$url : url(photo.jpg);

background-image: $url;

background-size: cover;

background-position: center;

@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {

background-image: $url, $url, $url;

background-size: cover;

background-position:

calc(50% - 1px) calc(50% - 1px),

calc(50% + 1px) calc(50% + 1px),

center;

background-blend-mode: color, difference;

filter: brightness(2);

}

}

.hallucination-effect {

$url : url(photo.jpg);

$offset : 5px;

background-image: $url;

background-size: cover;

background-position: center;

@supports (mix-blend-mode: multiply) {

position: relative;

overflow: hidden;

background-color: magenta;

background-blend-mode: screen;

&:before, &:after {

display: block;

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: inherit;

mix-blend-mode: multiply;

transform: scale(1.05);

}

&:before

{ background-color: yellow;

background-blend-mode: screen;

transform-origin: top left;

}

&:after {

background-color: cyan;

background-blend-mode: screen;

transform-origin: bottom right;

}

}

}

.collage-effect {

$url : url(photo.jpg);

background-image: $url;

background-size: cover;

background-position: center;

@supports (background-blend-mode: overlay) {

background-image: $url, $url, $url, $url, $url, $url;

background-size: 200%, 80%, 60%, 50%, 40%, 100%;

background-position: 50%, 80%, 30%, 0;

background-blend-mode: overlay;

background-repeat: no-repeat;

}

}

.infrared-effect {

$url : url(photo.jpg);

background-image: $url;

background-size: cover;

background-position: center;

filter: hue-rotate(180deg) saturate(2);

}

.selective-color-effect {

$url : url(photo.jpg);

background-image: $url;

background-size: cover;

background-position: center;

@supports (filter: brightness(3)) and (mix-blend-mode: color) {

position: relative;

&:before, &:after {

display: block; content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: inherit;

background-color: red;

background-blend-mode: screen;

mix-blend-mode: color;

filter: brightness(3);

}

}

}

.colored-pencil-effect {

$url : url(photo.jpg);

background-image: $url;

background-size: cover;

background-position: center;

@supports (filter: invert(1)) and (mix-blend-mode: color) {

position: relative;

&:before, &: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;

}

&:before {

background-image: $url, $url;

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);

}

&:after {

background: inherit;

mix-blend-mode: color;

}

}

}

.photo-border-effect {

$url : url(photo.jpg);

background-image: $url, $url;

background-position: center;

background-size: 60%, 20%;

background-repeat: no-repeat, repeat;

}

.mosaic-effect {

$url : url(photo.jpg);

background-image: $url, $url;

background-size: cover, 5% 5%;

background-position: center;

background-blend-mode: overlay;

}