优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

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

时间:2016-12-26 00:00:00 编辑:简简单单 来源:转载

原图:

1.jpg

下面大多数的效果图中,背景图片源background-image url通常会反复使用数次,同时利用CSS混合模式 (multiply, overlay, screen, difference等)进行处理。

在有一些效果中,使用了一下CSS filter 属性进一步处理图片,比如 grayscale(), brightness(), 和 contrast() 等可以让图片呈现出更好的效果。

制作这个演示时,大家首先让这些图片呈现出原始面貌,然后使用CSS @supports 来检测某种CSS属性是否在你的浏览器中受支撑。

然后才施加这些效果。

效果1:Pencil

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

.pencil-effect {

$url : url(/cssdiv/css/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

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

.emboss-effect{

$url:url(/cssdiv/css/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

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


.colored-chalkboard-effect {

$url : url(/cssdiv/css/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

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


.hallucination-effect {

$url : url(/cssdiv/css/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

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


.collage-effect {

$url : url(/cssdiv/css/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

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


.infrared-effect {

$url : url(/cssdiv/css/photo.jpg);

background-image: $url;

background-size: cover;

background-position: center;

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

}


效果7:selective-color

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


.selective-color-effect {

$url : url(/cssdiv/css/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

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


.colored-pencil-effect {

$url : url(/cssdiv/css/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

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

.photo-border-effect {

$url : url(/cssdiv/css/photo.jpg);

background-image: $url, $url;

background-position: center;

background-size: 60%, 20%;

background-repeat: no-repeat, repeat;

}

效果10:mosaic

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

.mosaic-effect {

$url : url(/cssdiv/css/photo.jpg);

background-image: $url, $url;

background-size: cover, 5% 5%;

background-position: center;

background-blend-mode: overlay;

}


以上便是用CSS实现各种图片滤镜效果的全部内容了,希翼大家在看了之后能有所收获。

文章评论

热门栏目

XML 地图 | Sitemap 地图