在我的网站上添加Instagram过滤器

Question

我在我的网站上使用CSSGram使图像具有类似Instagram的过滤器。 这是下面的方法，为图像添加过滤器：

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

如何将此效果添加到网页中的所有图像，而不是在每个图像之前使用<figure class="">，也可以在许多图像的css部分中使用此效果。
这可以使用javascript吗？

完成

Answer 1

是适用于带css的容器和样式，例如： -

-webkit-filter: brightness(0.9) contrast(1.4) hue-rotate(150deg) invert(0.1);

Answer 2

你可以使用像

这样的jquery

$('img').addClass('aden');

将css添加到所有imgs

Answer 3

使用JQUERY：

使用addClass方法

$('figure').addClass('aden')

请参阅此fiddle

或者您只能使用javascript：

var a = document.querySelector('figure');
if (a.classList) {
    a.classList.add('aden');
} else {
    a.className += ' aden';
}

请参阅此fiddle

Answer 4

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

$(function() {
    $("img").wrap("<figure class='aden'></figure>");
});

但是，您可能希望更具体地使用该选择器，因为它可能会破坏徽标，社交图标等其他图像

这里的工作示例：

https://jsfiddle.net/cs9asjhs/