Jquery 复杂的图像边界，可以这样做吗？

我们在photoshop中设计了一个网站，现在我正在尝试将设计转换为Wordpress模板。这一切进展顺利，除了一件事。我不知道如何为我的图像创建这种边框。这可以通过使用css/jquery技巧来实现吗？我们在图像上创建了一个边框。我附上了一张图片作为例子

---

图像周围的背景具有不同的颜色。

您可以使用CSS3边框图像属性进行以下操作：

以下是您可能正在寻找的css：

img {
  /* Set border to 10px, make it transparent
     in case border-image isn't supported */
  border: 10px solid transparent;

  /* Set the image and make it stretch around
     the image evenly */
  border-image: url(border.png) 50% stretch;
}

编辑：另一个选项是将边框覆盖在图像上：

#容器{
位置：相对位置；
宽度：360px；
高度：299px；
}
#容器>img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

---

如果需要边框在图像上自动应用覆盖，可以将边框设置为.png并使用div对其进行分层。请参见以下示例：

基本上你有两个div，主图像和覆盖。主图像是客户端将上载到的图像：

#main_image{
    width: 100%;
    height: 100%;
    background-image: url("https://pbs.twimg.com/profile_images/378800000072921331/ecb6edfa73f25a3857df7991f1466962.jpeg");
}

覆盖图像是您自己添加的frame.png文件：

#overlay_image{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 256px;
    height: 256px;
    background-image: url("http://uxrepo.com/static/icon-sets/windows/png32/256/000000/border-inner-256-000000.png");
}

---

这只是实现这一目标的一个选择。使用这种方法，图像的大小必须是统一的，因此这可能无法帮助您获得所需的结果。

css可以做很多事情，但它不是photoshop…有什么原因不能将边框作为图像文件本身的一部分吗？@Marc B当然可以。。。我知道。但这不是问题所在。我的客户需要在CMS中上传他的照片，并且需要将边框附在图像上。因为我的客户没有photoshop…@taylorc93这是我想到的最后一个场景。如果没有其他灵活的选项，请将边框和图层背景设置为透明？纯色->精美图像->普通内容。这会让坚实的“元背景”渗透到精美图像的透明图像中，“着色”它们。