Question

我试图为徽标图像制作透明边框，如下图所示

我试图不使用两个图像，一个用于徽标，另一个用于透明徽标，并且具有响应性。我用谷歌搜索了它，我无法找到一个好的答案，请提前帮助和许多提前感谢

Answer 1

您可以使用CSS Masking和Clipping。具体而言，感兴趣的属性为clip-path。

clip-path属性可以应用于所有HTML元素SVG 图形元素和SVG容器元素。

此处提供更多信息和示例： https://www.html5rocks.com/en/tutorials/masking/adobe/

img {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

<img src="http://lorempixel.com/400/200/" alt="Smiley face" height="400" width="200">

替代@Justinas指出，你应该选择SVG。

Answer 2

可能是一个简单的修复，但如果容器是固定宽度，您可以使用透明的png作为容器的标题部分。

然后，您可以使用margin-top: -Xpx;来设置定位。

Answer 3

可以做的是通过 JavaScript （在画布顶部）从png图像中创建黑色轮廓，然后将输出放在下面图像。

<强>的JavaScript ：

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var image = document.getElementById("imgSource");
    context.drawImage(image, 0, 0);

    var imgd = context.getImageData(0, 0, 300, 300); // width and height value
    var pix = imgd.data;
    var blackpixel = 21;
    for (var i = 0, n = pix.length; i < n; i += 4) {
        if (i > 3) {
            if ((Math.abs(pix[i-3] - pix[i]) > 10) &&
                (Math.abs(pix[i-2] - pix[i+1]) > 10) &&
                (Math.abs(pix[i-1] - pix[i+2]) > 10)) {
                pix[i] = blackpixel;  
                pix[i+1] = blackpixel;  
                pix[i+2] = blackpixel;
            }
        } else {
            if (pix[i] < 250 && pix[i+1] < 250 && pix[i+2] < 250) {
                pix[i] = blackpixel;  
                pix[i+1] = blackpixel;  
                pix[i+2] = blackpixel;
            }
        }
    }

    context.putImageData(imgd, 0, 0);       
}

<强> HTML ：

<img id="imgSource" src="yourimg.png">
<canvas id="canvas" width="300" height="300"></canvas>

然而，正如其他人所说，你应该用 SVG 来做这件事。或者在 Photoshop 中自己创建边框，因为此解决方案的功能非常有限。

归功于this帖子，以获得答案。

Answer 4

您可以使用SVG图像。

如果是普通图像，则图像元素将始终为矩形，并且您无法设置与某些形状匹配的边框

有没有办法用图像的形状为图像制作透明边框？

4 个答案: