CSS - 图片透明背景在网站上无法呈现

Question

CSS - 图片透明背景在网站上无法呈现

phpcss

3

我正在尝试重新设计我的网站，以便我的原始方形、基于瓷砖的图像渲染可以更像图像的剪贴...以消除那种网格模式。

这是最初的样子...

这是我想要的一个大致的模型：

因此，我用透明背景重新保存了一个图像缩略图... 我只想让狗显示出来，而正方形是透明的，下面会显示网站的背景。

然而，当我在页面上呈现它时，它有这个黑色的背景。

我检查了我的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);

?>

- user3871

你能在这里放一个演示吗？http://jsfiddle.net/ - Sachin

@GuillermoSiliceoTrueba 目前使用的是 Chrome。 - user3871

右键点击该元素，在菜单中选择检查元素，您将看到所有应用的CSS规则。另一件事是Photoshop有几种PNG保存模式，您可能正在使用其中一个Alpha设置为黑色的模式（常见情况）。 - Guillermo Siliceo Trueba

or make sure image is png24 - lemon郑

@lemon郑，我找到了问题，但不知道如何解决。请参见上面的更新。 - user3871

显示剩余11条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel · Accepted Answer

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

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

change to:

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

imagejpeg($im);

change to:

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图像。请告诉我您的发现..:-)..