CSS - 图像的透明 bg 未在网站上呈现

Question

我正在尝试重新设计我的网站，以便我原来的方形、基于平铺的图像渲染可以更像是图像的剪切......以摆脱那种网格模式。

这是它最初的样子......

这是我要达到的目标的粗略模型：

所以我重新保存了一个具有透明背景的图像缩略图...我只想显示狗，而正方形是透明的，它将在下面显示网站的背景。

然而，当我在页面上渲染它时，它的背景是黑色的。

我检查了我的 CSS 以查看是否有某种 img 类或渲染漫画的类...甚至引导程序查看可能将背景颜色分配给黑色的位置（以及已搜索十六进制代码 000000)，但没有找到...

你知道为什么会这样吗？

谢谢！

---

编辑：我刚刚注意到一些事情......

我在顶部的徽标以透明背景呈现...并且该元素是 png 文件...因此，它的 MIME 类型是 image/png。

我正在使用缩略图脚本来使缩略图更小，但现在元素是 thumber.php，它把它作为 MIME 类型的图像/jpeg。

所以我猜是我的缩略图脚本改变了 MIME 类型。

所以我检查了它，它正在将文件创建为 jpeg

//imagejpeg outputs the image
imagejpeg($img);

有没有办法改变它，以便将重新采样的图像输出为 png？

---

缩略图脚本：

    <?php
#Appreciation goes to digifuzz (http://www.digifuzz.net) for help on this

$image_file = $_GET['img']; //takes in full path of image
$MAX_WIDTH = $_GET['mw'];
$MAX_HEIGHT = $_GET['mh'];
global $img;

//Check for image
if(!$image_file || $image_file == "") { 
    die("NO FILE."); 
}

//If no max width, set one
if(!$MAX_WIDTH || $MAX_WIDTH == "") { 
    $MAX_WIDTH="100"; 
}

//if no max height, set one
if(!$MAX_HEIGHT || $MAX_HEIGHT == "") { 
    $MAX_HEIGHT = "100"; 
}

$img = null;
//create image file from 'img' parameter string
$img = imagecreatefrompng($image_file);

//if image successfully loaded...
if($img) {
    //get image size and scale ratio
    $width = imagesx($img);
    $height = imagesy($img);

    //takes min value of these two
    $scale = min($MAX_WIDTH/$width, $MAX_HEIGHT/$height);

    //if desired new image size is less than original, output new image
    if($scale < 1) {
        $new_width = floor($scale * $width);

        $new_height = floor($scale * $height);


        $tmp_img = imagecreatetruecolor($new_width, $new_height);

        //copy and resize old image to new image
        imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

        imagedestroy($img);

        //replace actual image with new image
        $img = $tmp_img;
    }
}
//set the content type header
header("Content-type: image/png");

//imagejpeg outputs the image
imagealphablending($img, false);
imagesavealpha($img, true);
imagepng($img);

imagedestroy($img);

?>

Answer 1

您需要在图像生成器中进行一些更改，看看是否适合您。 关键的变化在于标题的设置和图像生成的方法。您将寻找以下两个

header('Content-Type: image/jpeg');

改为：

header('Content-Type: image/png');

---

imagejpeg($im);

改为：

imagepng($im)

在处理带有 Alpha 通道的 png 图像时，您应该采取一些额外的步骤。 在使用 imagepng() 将其吐出之前，需要添加这些行。

imagealphablending($img, false);
imagesavealpha($img, true);

此信息可以在php.net上找到

编辑： 尝试对此代码进行以下更改：

 if($scale < 1) {
        $new_width = floor($scale * $width);

        $new_height = floor($scale * $height);


        $tmp_img = imagecreatetruecolor($new_width, $new_height);


        imagealphablending($tmp_img,true); // add this line

        //copy and resize old image to new image
        imagecopyresampled($tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

        $img = $tmp_img;

        // remove line here
    }
}

header("Content-type: image/png");
imagesavealpha($img, true);
imagepng($img);
imagedestroy($img);
imagedestroy($tmp_img); // add this line here

基本上，您创建新图层并将它们放在一起。对于每一层，您都需要设置 Alpha 混合。我成功地创建了 alpha 图像。让我知道你的发现是什么.. :-) ..