13306647218
导航
宁波软件定制
解决方案
案例
新闻
服务
联系
宁波定制软件,宁波系统开发
联系 13306647218

一站式宁波app软件定制服务

小程序开发 > 动态 >

宁波网站设计公司：如何应用Instagram过滤网络图片吗

2019-09-07 14:14:59

宁波网站设计公司：如何应用Instagram过滤网络图片吗

宁波网站设计公司许多使用Instagram和爱 过滤器 的应用,使照片更有趣、更美丽。 虽然到目前为止,这些过滤器的使用仅限于使用在应用程序。如果你想要什么 使用Instagram过滤器在web图像 ,外部的应用程序,像照片你想把你的个人博客或网站?

嗯,你可以使用 CSSGram ,一个小库,允许你 编辑你的照片与过滤器类似Instagram上你可以找到应用程序 .. 不像Photoshop编辑手动或者通过Photoshop行动,CSSGram,整个过程是通过CSS。

它是如何工作的

生成效果,CSSGram利用 CSS过滤器 和 CSS混合模式 ,基本上混合的影响,它模仿你想要Instagram过滤器。 影响应用于图像容器,通过伪元素。 让我们看看这是如何实现这个“1977”的例子:

这是伪元素补充道。

1
2
3.
4
5
6
7
8
9
10
11
12
._1977{
  位置:相对;
}
._1977:{后
  内容:”;
  显示:块;
  高度:100%;
  宽度:100%;
  前:0;
  左:0;
  位置:绝对;
}

这是CSS过滤和混合补充道:

1
2
3.
4
5
6
7
8
._1977 {
  -webkit-filter:对比(1.1)亮度(1.1)饱和(1.3);
  过滤器:对比(1.1)亮度(1.1)饱和(1.3);
}
._1977:{后
  背景:rgba (243,106,188,0.3);
  mix-blend-mode:屏幕;
}

如何使用

我们不能直接添加过滤器类图像元素,它必须被添加到容器或父类,例如 <图> 作为一个容器。


的代码是这样的:

1
2
3.
<图类=“_1977”>
    < img src =“images.jpg”>
图> < /

别忘了包括CSSgram库(得到它 在这里 )你的HTML文档。

1
< link rel =“样式表” href =“路径/ / cssgram.css”>

我创建的图像演示之前和之后添加过滤器和结果是非常好的。 有13个过滤器包括在图书馆。 下面你将看到原始图像和图像之间的差异在过滤器” 1977 ”、“ 亚丁湾 ”和“ 条格平布 ”。

看到这支笔 rOKPmW

如果你只是使用任何一个感兴趣的风格,你可以加载 单独的CSS文件 相应的行动。

使用SCSS

如果你想将过滤器添加到当前图像容器类没有名称的改变,可以通过扩展SCSS文件内滤效应。 这里是如何做到这一点。

首先 下载SCSS源文件 SCSS文件和导入。

1
@ import“供应商/ cssgram”;

假设你有HTML sctructure像下图:

1
2
3.
< div class =“我的课”>
    < img src =“images.jpg”>
< / div >

然后在你的风格。 scss,延长过滤器是这样的:

1
2
3.
4
.my-class {
    …
    @extend % _1977;
}


随机推荐