Php CSS-网站上未呈现图像的透明背景

我正试图重新设计我的网站，使我原来的正方形，基于瓷砖的图像渲染可以更像是图像的剪贴画。。。为了摆脱网格模式

这是它最初的样子

这是我想要的东西的粗略模型：

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

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

我已经检查了我的CSS，看看是否有某种img类，或用于渲染漫画的类。。。甚至是引导程序，看看哪里可能有一个背景颜色被分配到黑色（也搜索了十六进制代码000000），但没有找到一个

你知道为什么会这样吗

谢谢

---

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

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

我正在使用一个缩略图脚本使缩略图变小，但是现在元素是thumber.php，它将其设置为MIME类型image/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);

?>

---

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

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

改为：

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

imagepng($im)

---

改为：

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

imagepng($im)

当使用alpha通道处理png图像时，您应该采取一些额外的步骤。 在使用imagepng（）输出之前，需要添加这些行

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

此信息可在上找到

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

 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

if（$scale<1）{
$new_width=地板（$scale*$width）；
$new_height=地板（$scale*$height）；
$tmp\u img=ImageCreateTureColor（$new\u width，$new\u height）；
imagealphablending（$tmp_img，true）；//添加此行
//将旧图像复制并调整大小为新图像
imagecopyresampled（$tmp_img，$img，0，0，0，$new_width，$new_height，$width，$height）；
$img=$tmp\U img；
//把线移到这里
}
}
标题（“内容类型：图像/png”）；
imagesavealpha（$img，true）；
图像PNG（$img）；
图像处理（img）；
图像销毁（$tmp_img）；//把这一行加在这里

---

基本上，您可以创建新层并将其组合在一起。对于每个层，需要设置alpha混合。我成功地创建了alpha图像。让我知道你的发现是什么…-）

你能在这里放一个演示我的网站的代码是广泛的。。。我不知道如何把它浓缩成小提琴哦，你是在Internet Explorer中试用吗？IE的透明度支持历史很差。@GuillermoSiliceoTrueba Chrome现在右键单击元素，然后在菜单“检查元素”上，您将看到应用的所有css规则。另一件事是photoshop有一些png保存模式，你可能正在使用一个Alpha设置为黑色的模式（发生了），我不完全确定这个答案是否可以通过简单地将

jpeg

更改为

png

来实现。我可能错了，但整个脚本不需要更改，因为压缩会有所不同吗？此外，您必须确保在PHP文件中使用alpha透明，否则该文件是否为

png

，

gif

，

jpeg

，

velociraptor

，

psd

…都无关紧要。。将其保存为png是获得他想要的东西的一个良好开端。随着jpeg的产生，他将永远无法获得透明度开始。但你是对的，可能还有更多的事情要处理。我会把它添加到答案中。@Daniel谢谢Daniel，但我已经尝试了所有这些方法，但都没有成功。我发现，当我拍摄相同的图像并直接添加它时，它是透明的。。。所以缩略图脚本肯定有问题。我已经添加了全部内容above@Growler设置imagealphablending（$image，true）；在每个新层上@咆哮者-你应该能够将我的编辑复制到你的缩略图创建者中，并解决你的问题。我做了最后一次编辑，将其正确地实现到缩略图创建者中。欢呼！：-）