☰

创建模糊的 PNG 图像以覆盖文本链接

tag-icon • tag-icon adobe-photoshop images png
创建模糊的 PNG 图像以覆盖文本链接

我有一个网站，我想让导航中的文本链接模糊。当访问者将鼠标悬停在文本链接上时，它又变得清晰。

我的想法是制作某种 PNG 格式的模糊图像来覆盖文本链接。

我试过这样做，但我的 Photoshop 技能很差。我可以做一个，因为模糊白色不起作用 :s

  • 您将怎样创作这样的图像？
  • 您还有其他解决方案吗？

答案1

没有办法创建一个（半）透明的 PNG 图像，使它覆盖的任何内容都变得模糊。这根本做不到。如果你真的需要一个动态网站，以便你可以轻松更改文本，我建议使用如下所示的 PHP 脚本来模糊图像。它来自这里。您可以使用另一个 PHP 脚本来生成文本图像。

结果：

结果

<?php
function blur (&$image) {
    $imagex = imagesx($image);
    $imagey = imagesy($image);
    $dist = 2;

    for ($x = 0; $x < $imagex; ++$x) {
        for ($y = 0; $y < $imagey; ++$y) {
            $newr = 0;
            $newg = 0;
            $newb = 0;
            $colours = array();
            $thiscol = imagecolorat($image, $x, $y);
            for ($k = $x - $dist; $k <= $x + $dist; ++$k) {
                for ($l = $y - $dist; $l <= $y + $dist; ++$l) {
                    if ($k < 0) { $colours[] = $thiscol; continue; }
                    if ($k >= $imagex) { $colours[] = $thiscol; continue; }
                    if ($l < 0) { $colours[] = $thiscol; continue; }
                    if ($l >= $imagey) { $colours[] = $thiscol; continue; }
                    $colours[] = imagecolorat($image, $k, $l);
                }
            }

            foreach($colours as $colour) {
                $newr += ($colour >> 16) & 0xFF;
                $newg += ($colour >> 8) & 0xFF;
                $newb += $colour & 0xFF;
            }
            $numelements = count($colours);
            $newr /= $numelements;
            $newg /= $numelements;
            $newb /= $numelements;
            $newcol = imagecolorallocate($image, $newr, $newg, $newb);
            imagesetpixel($image, $x, $y, $newcol);
        }
    }
}
    echo "Image before blurring: <img src=\"blurimg.jpg\" /><br /><br />";
    $im = imagecreatefromjpeg("blurimg.jpg");
    blur($im);
    imagejpeg($im, "blurimg2.jpg");
    echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";
    imagedestroy($im);
?>

答案2

我在这里要做的是创建文本按钮，然后使用 Infranview（免费软件，AFIAK，仅限 Windows）中的过滤器或效果保存一个覆盖效果的副本，这样你就会有 image1.png 和 image1blurred.png（作为示例）。然后，您将创建一个滚动效果，这样除非您将其滚动，否则毛刺会一直显示。

另外，>为什么<你想这样做？

答案3

您应该能够填充纯白色并将图层透明度设置为小于 100%。

相关内容