是否可以在一个页面上有两个像素效果的图像？答案

【问题标题】：Is it possible to have two pixastic-effected images on a single page?是否可以在一个页面上有两个像素效果的图像？
【发布时间】：2011-06-09 11:09:28
【问题描述】：

简单但具体的问题。我有一个使用 Pixastic 模糊图像的网站。页面上有两个图像需要进行模糊处理。这似乎在 IE 中运行良好（我相信它在图像上使用过滤器）但在其他浏览器（Firefox/Chrome）上不起作用。在那些浏览器中，它只会影响第二张图像，而第一张被什么都替换 - 所以我只得到一个渲染页面，上面有一个模糊图像而不是两个。

顺便说一下，我正在使用 jQuery 选择器。我使用的代码基本上就是这样的：

<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/pixastic.custom.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.blur').pixastic('blurfast', {amount:0.2});
  });
</script>
</head>

<body>
  <img src="img/title1.png" title="" class="blur" />
  <img src="img/title2.png" title="" class="blur" />
</body>

有谁知道是否可以使用 Pixastic 影响多个图像，如果可以，如何？

谢谢

【问题讨论】：

标签： blur pixastic

【解决方案1】：

据我所知，你所拥有的应该可以工作。

选项 2. 尝试显式指定 CSS 类？

例如大致是这样的：

<html>
<head>
<script type="text/javascript">
var pixastic_parseonload = true;
</script>
<script src="pixastic.core.js" type="text/javascript"></script>
<script src="invert.js" type="text/javascript"></script>
</head>
<body>
</style>
  <img src="img/title1.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
  <img src="img/title2.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
</body>
</html>

【讨论】：

需要在我的 Pixastic js 文件引用之前包含，但之后 CSS 选择器工作正常。非常感谢！