复杂的图像边框,可以这样做吗?

时间:2015-12-21 21:32:50

标签: jquery html css

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

This is the image

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

2 个答案:

答案 0 :(得分:4)

您可以使用CSS3 border-image属性:http://www.w3schools.com/cssref/css3_pr_border-image.asp

这是您可能正在寻找的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;
}

编辑:另一种选择是在图像上叠加边框:

#container {
  position: relative;
  width: 360px;
  height: 299px;
}
#container > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<html>
  <body>
    <div id="container">
      <img src="http://blog.protectedstatic.com/wp-content/uploads/2007/05/pointers.png" id="content" />
      <img src="http://www.clipartandgraphics.com/images/borders/bwwaves.gif" id="border" />
    </div>
  </body>
</html>  

答案 1 :(得分:0)

如果您需要边框自动在图像上应用叠加,则可以将边框设为.png,并使用div对其进行分层。请在此处查看此示例:http://jsfiddle.net/sqJtr/961/

基本上你有两个div,主图像和叠加层。主要图像是客户端上传到的图像:

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

叠加图像是您自己添加的框架.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");
}

这只是如何完成此操作的一个选项。使用此方法,图像必须是统一的大小,因此这可能无法帮助您获得正在寻找的结果。