在图像周围添加透明边框

Posted 2023-02-25

【中文标题】在图像周围添加透明边框

【英文标题】：Add transparent border around an Image

【发布时间】：2012-10-04 12:34:14

【问题描述】：

我正在使用 phpThumb 覆盖几个图像，这利用了 GD 库。为了使此功能起作用，图像的大小必须相同。因此，当用户上传图片时，我必须验证尺寸。最后，为了让它正确显示，我需要在图像周围添加一个透明边框，以便底层图像大小相同。

所以我不能使用 CSS 方法。我不知道是否有其他 GD 调用可以做到这一点，但该网站目前已关闭 (http://www.libgd.org/)。

你会推荐什么方法来添加透明边框？

【问题讨论】：

我认为您可以使用更简单的方法。使用 phpthumb，您可以更改图像大小。而且我不明白为什么你需要边界。你可以添加一些代码吗？

【参考方案1】：

CSS 中的边距就像一个透明边框。但是对于您的问题，有更好的方法：

首先，如果您使用的是 phpThumb，您可以自动调整图像大小，因此无需验证图像大小：

<?php

    require_once 'path/to/ThumbLib.inc.php';

    try
    
         $thumb = PhpThumbFactory::create('/path/to/image.jpg');
    
    catch (Exception $e)
    
        // handle error here however you'd like
    
    $thumb->resize(100, 100);
    $thumb->show();
?>

您可以找到here更多详细信息。

我不明白为什么需要边框。但是，如果您想在图像上使用叠加层，则无需为图像添加边框以适应叠加层。如果您需要在图像上叠加，您可以执行以下操作：

 <div class="container">
   <img src="path to your image" />
   <span class="overlay"></span>
 </div>

并应用一些样式：

.container // the same size as your image
  width:100px;
  height:100px;


.overlay
   position: absolute;
   top:0;
   left: 0;
   width:100%;
   height:100%;
   background: ...
   ...

【讨论】：

我想要透明边框的原因是我正在使用 phpThumb 在图片周围覆盖一个框架。所以图片必须调整到框架的内部。如果底层图像和框架大小不同，phpThumb 会扭曲其中一张图像，并非不合理。因此，一旦我的图片尺寸适合框架内部，我就想在它周围挖出一个透明的孔，这样框架和图片的尺寸相同。这能解释清楚吗？

好吧，不是真的，我需要看一些代码来了解问题所在