在我的网站的图像上添加Instagram过滤器 [英] Adding Instagram filters on images in my website

问题描述

我在我的网站上使用 CSSGram ，使图片拥有类似Instagram的过滤器。
以下是向图片添加过滤器的方法：

 < figure class =aden> ; 
< img src =../ img.png> 
< / figure> 
  

如何将此效果添加到网页中的所有图片，而不是使用< figure class => 在每个单个图像之前，还在许多图像的css部分。

可以使用 javascript ？

解决方案

p>这些样式基于 img 坐在 figure 元素内。您可以自动将所有图像包装在图形元素中，例如

  $（function（）{
 $ img）。wrap（< figure class ='aden'>< / figure>）; 
}）;但是，您可能希望使用该选择器更具体，因为它可能会破坏其他图像，如徽标，图片，社交图标等
 
 
 
这里的工作示例：
 
 
 
  https://jsfiddle.net/cs9asjhs/  
 
I am using CSSGram on my website to make images have Instagram-like filters.
This is the method below to add a filter to a image:
 <figure class="aden">
 <img src="../img.png">
 </figure>
How can i add this effect to all the images in the webpage, instead of using <figure class=""> before every single image, and also in a css section for  many images.

Can this be done using javascript ?
解决方案
The styles are based on a img sitting inside figure element. You could automatically wrap all of the images in a figure element like so
$(function() {
    $("img").wrap("<figure class='aden'></figure>");
});
However, you might want to be more specific with that selector as it could break other images like logos, social icons etc

Working example here:

https://jsfiddle.net/cs9asjhs/

                        
这篇关于在我的网站的图像上添加Instagram过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！