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

Adding Instagram filters on images in my website

本文关键字：过滤器 图像 Instagram 添加 我的 网站      更新时间：2023-09-26

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

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

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

是的，

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

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

像这样使用 jquery

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

将 CSS 添加到所有图像

使用 JQUERY：

使用 addClass 方法 

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

看到这个小提琴

或者你可以只使用JavaScript：

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

看到这个小提琴

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

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

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

这里的工作示例：

https://jsfiddle.net/cs9asjhs/

相关文章：