php怎么输出背景透明的图片？

Posted 2023-05-11

是用image系列的函数直接画图：
怎么输出一张全透明的图片？
顺便问一下，如果对它使用了其他image函数，背景会变吗？

php可以使用GD库或者ImageMagick工具生成png或者gif的背景透明图片.推荐使用ImageMagick.
这里有范例 http://php.net/manual/en/imagick.examples-1.php
准备一张png图片,放到php文件的目录,运行看看效果.
<?php
/* Read the image */
$im = new Imagick("test.png");
/* Thumbnail the image */
$im->thumbnailImage(200, null);

/* Create a border for the image */
$im->borderImage(new ImagickPixel("white"), 5, 5);

/* Clone the image and flip it */
$reflection = $im->clone();
$reflection->flipImage();

/* Create gradient. It will be overlayed on the reflection */
$gradient = new Imagick();

/* Gradient needs to be large enough for the image and the borders */
$gradient->newPseudoImage($reflection->getImageWidth() + 10, $reflection->getImageHeight() + 10, "gradient:transparent-black");

/* Composite the gradient on the reflection */
$reflection->compositeImage($gradient, imagick::COMPOSITE_OVER, 0, 0);

/* Add some opacity. Requires ImageMagick 6.2.9 or later */
$reflection->setImageOpacity( 0.3 );

/* Create an empty canvas */
$canvas = new Imagick();

/* Canvas needs to be large enough to hold the both images */
$width = $im->getImageWidth() + 40;
$height = ($im->getImageHeight() * 2) + 30;
$canvas->newImage($width, $height, new ImagickPixel("black"));
$canvas->setImageFormat("png");

/* Composite the original image and the reflection on the canvas */
$canvas->compositeImage($im, imagick::COMPOSITE_OVER, 20, 10);
$canvas->compositeImage($reflection, imagick::COMPOSITE_OVER, 20, $im->getImageHeight() + 10);

/* Output the image*/
header("Content-Type: image/png");
echo $canvas;
?> 参考技术A

php代码如下：

<?php
echo '<img src="images/test.png">';

案例中直接使用echo输出html源代码；

<img>标签是显示图片的

src 是图片的路径

images/表示图片所在的目录（当前表示，在当前网页文件同级目录中，的images文件夹中去找一张，名为test的格式为png的图片）

html中怎么设置body背景图片的透明度,但不影响其他图片与文字

html中怎么设置body背景图片的透明度,但不影响其他图片与文字

方法一：把文字放在<div class="bodystyle"> </div>里面，但因为opacity属性会被继承，会导致你的文字也会透明，所以要在文字的CSS样式里面声明opacity:1;把它变得不透明；

方法二：在.bodystyle里面加上z-index:1;然后把你需要的文字放在一个新的div里面
<div style="position:absolute; z-index:2;" > <div>

额外介绍一下z-index属性：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。值越高会放在越前面。这个属性起作用的前提是元素要脱离文档流进行绝对定位，也就是要声明position:absolute; 参考技术A 在背景图片的样式中设置opacity 属性改变透明度 参考技术B bodybackground:#0f0; background-color:transparent;
或者 bodybackground:rgba255,255,255,0