如何使用 CSS 在图像周围添加非矩形边框?

发布于 2024-08-31 10:36:22 字数 246 浏览 5 评论 0原文

我有三张图像,它们的形状不是正方形或长方形。他们就像任何人的脸一样。

所以,基本上,我的图像尺寸为 196x196 或类似的尺寸,但完整的正方形或矩形,脸部位于中间,透明背景位于其余部分。

现在,我也想删除透明背景并只保留面孔。

不知道这是否可能,请注意,这不是一个编程问题。

编辑(来自评论):如何使用 CSS 在图像形状周围放置边框,而不是在边界周围放置矩形边框。

I have three images, and they are not square or rectangular in shape. They are just like face of anyone.

So, basically, my images are in the size 196x196 or anything like that, but complete square or rectangle with the face in the middle and transperant background in the rest of the portion.

Now, I want to remove the transperant background too and just keep the faces.

Don't know if this is possible and mind you, this isn't a programming question.

EDIT (from comments): How do I put a border around the shape of the image, not a rectangular one around the boundary, using CSS.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

你没皮卡萌 2024-09-07 10:36:22

回答你关于脸部周围边界的问题。

  1. 将图像加载到 Photoshop 或 gimp 中
  2. 制作第二个图层,作为副本
  3. 在底层上,调整脸部大小,使其比您想要的边框大一些
  4. 使用低容差用边框颜色填充放大的脸部,这样脸部现在是单色的,
  5. 保存为 .png 并使其变平。

据我所知,没有办法用 CSS 来做到这一点——你可以使用 ImageMagick 编写一个程序来做到这一点,或者(免责声明,我在 Atalasoft 工作)DotImage,.NET 成像 SDK。无论在哪种情况下,您都可以复制文件,调整大小和颜色,然后将原始文件覆盖在其上。

To answer your question about borders around the face.

  1. Load the image into Photoshop or gimp
  2. Make a second layer that is a copy
  3. On the bottom layer, resize the face so that it is the amount bigger that you want the border to be
  4. Fill the enlarged face with the border color using a low tolerance, so that the face is now a single color
  5. save to a .png and allow it to flatten.

There is no way to do this with CSS that I know of -- you could write a program to do this using ImageMagick or (dislaimer, I work for Atalasoft) DotImage, a .NET imaging SDK. In either, you'd copy the file, do the resize, the color, and then overlay the original onto it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文