用CSS實現各種圖片濾鏡效果示範

原圖：

下面大多數的效果圖中，背景圖片源background-image url通常會反覆使用數次，同時利用CSS混合模式 (multiply, overlay, screen, difference等)進行處理。

在有一些效果中，使用了一下CSS filter 屬性進一步處理圖片，比如 grayscale(), brightness(), 和 contrast() 等可以讓圖片呈現出更好的效果。

製作這個示範時，我們首先讓這些圖片呈現出原始面貌，然後使用CSS @supports 來檢測某種CSS屬性是否在你的瀏覽器中受支援。

然後才施加這些效果。

效果1：Pencil

.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;  }  }

效果2：Emboss

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

效果3：Colored chalkboard

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

效果4：hallucination

.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; } } }

效果5：collage

.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; } }

效果6：infrared

.infrared-effect { $url : url(photo.jpg); background-image: $url; background-size: cover; background-position: center; filter: hue-rotate(180deg) saturate(2); }

效果7：selective-color

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

效果8：colored-pencil-effect

.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; } } }

效果9：photo-border

.photo-border-effect { $url : url(photo.jpg); background-image: $url, $url; background-position: center; background-size: 60%, 20%; background-repeat: no-repeat, repeat; }

效果10：mosaic

.mosaic-effect { $url : url(photo.jpg); background-image: $url, $url; background-size: cover, 5% 5%; background-position: center; background-blend-mode: overlay; }

以上便是用CSS實現各種圖片濾鏡效果的全部內容了，希望大家在看了之後能有所收穫。