html css叠加垂直_使用CSS和PHP GD2在HTML中创建图像叠加层的4种方法-CSDN博客

html css叠加垂直

总览 (Overview)

I often come across questions which involve how to overlay images in a web page. The process for doing this is fairly straight forward. Three such methods are discussed in the sections below.

我经常遇到涉及如何在网页中叠加图像的问题。这样做的过程相当简单。以下各节讨论了三种这样的方法。

方法1：定位 (Method 1: Positioned)

This method utilises CSS to position both images absolutely in the container and use CSS to set the z-index of the foreground image higher than the background image.

此方法利用CSS将两个图像绝对定位在容器中，并使用CSS将前景图像的z索引设置为高于背景图像。

HTML

<div class="pngcontainer1">
  <img src="images/dlbg.png" />
  <img src="images/foreground1.png" />
</div>

CSS

<style type="text/css">
.pngcontainer1, .pngcontainer1 img {
  position: relative;
  
}
.pngcontainer1 img {
  z-index: 101;
}
.pngcontainer1 img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
</style>

方法2：背景 (Method 2: Background)

This method sets the background image as a background to the container and the foreground image is a normal image, inside the container.

此方法将背景图像设置为容器的背景，而前景图像是容器内部的普通图像。

HTML

<div class="pngcontainer2">
  <img src="images/foreground1.png" />
</div>

CSS

<style type="text/css">
.pngcontainer2 {
  background: url(images/dlbg.png) no-repeat 0 0;
}
</style>

Note: if your background image is larger than your foreground image you will need to specify a width and height on your container element to ensure that it expands to accommodate the background image.

注意：如果背景图像大于前景图像，则需要在容器元素上指定宽度和高度，以确保其扩展以适应背景图像。

方法3：多个背景图像 (Method 3: Multiple Background Images)

This method uses CSS3 multiple background images.

此方法使用CSS3多个背景图像。

HTML

<div class="pngcontainer3"></div>

CSS

<style type="text/css">
.pngcontainer3 {
  background-image: url(images/foreground1.png), url(images/dlbg.png);
  background-position: left top, left top;
  background-repeat: no-repeat, no-repeat;
  width: 132px;
  height: 150px;
}
</style>

Note: with this method the width and height have to be specified in order for the image to display correctly

注意：使用此方法必须指定宽度和高度，以便图像正确显示

方法4：PHP GD2 imagecopymerge (Method 4: PHP GD2 imagecopymerge)

This method uses the PHP GD library to create a merged image that is sent back to the browser as a normal <img/> element. In the code below the <img/> src is set to a PHP script. Two parameters are passed in the URL indicating the (fg) foreground and (bg) background images respectively. The script merges the two images and sends the result back.

此方法使用PHP GD库创建合并的图像，该图像作为普通的<img />元素发送回浏览器。在<img /> src下面的代码中，将其设置为PHP脚本。 URL中传递了两个参数，分别指示（fg）前景和（bg）背景图像。该脚本将两个图像合并，然后将结果发送回去。

No CSS is required for this solution

此解决方案不需要CSS

HTML

<div class="pngcontainer4">
  <img src="getimage.php?bg=dlbg.png&fg=foreground1.png" />
</div>

PHP

The code below assumes the images exist and are in the images folder relative to the script

下面的代码假定图像存在并且相对于脚本位于images文件夹中

<?php
if ($_GET) {
  $bg = isset($_GET['bg']) ? 'images/' . $_GET['bg'] : false;
  $fg = isset($_GET['fg']) ? 'images/' . $_GET['fg'] : false;
  if (file_exists($bg) && file_exists($fg)) {
    // Create image instances
    $dest = imagecreatefrompng($bg);
    $src = imagecreatefrompng($fg);
 
    $wd=imageSX($dest);
    $ht=imageSY($src);
    // Copy and merge
    imagecopymerge_alpha($dest, $src, 0, 0, 0, 0, $wd, $ht,100);
 
    // Output and free from memory
    header('Content-Type: image/gif');
    imagepng($dest);
 
    imagedestroy($dest);
    imagedestroy($src);
  }
}
function imagecopymerge_alpha($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct){
  // creating a cut resource
  $cut = imagecreatetruecolor($src_w, $src_h);
 
  // copying relevant section from background to the cut resource
  imagecopy($cut, $dst_im, 0, 0, $dst_x, $dst_y, $src_w, $src_h);
   
  // copying relevant section from watermark to the cut resource
  imagecopy($cut, $src_im, 0, 0, $src_x, $src_y, $src_w, $src_h);
   
  // insert cut resource to destination image
  imagecopymerge($dst_im, $cut, $dst_x, $dst_y, 0, 0, $src_w, $src_h, $pct);
}

A working sample of the above can be found here

上面的工作样本可以在这里找到