CSS - 在網站上不渲染圖像的透明bg

Question

我正在嘗試重新設計我的網站，以便我原始的正方形，圖像的基於圖像的渲染可以更多地是圖像的摳圖...爲了擺脫網格模式。

下面是它原來的樣子......

這裏就是我要去爲我的粗略實物模型：

所以我重新保存圖像的縮略圖具有透明背景......我只想讓狗展示，而正方形是透明的，它會顯示下面的網站背景。

然而，當我呈現在網頁上，它有這個黑色的背景。

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

?> 

Answer 1

您將需要在圖像產生一些變化，看看是否對你有用的。 關鍵更改是在標題和圖像生成方法的設置內。您將尋找這些下面的兩個

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

變化：

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

---

imagejpeg($im); 

變化：

imagepng($im) 

當PNG圖像處理alpha通道你應該採取一些額外的步驟。 在將它與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圖像。讓我知道你的發現是什麼.. :-) ..