我们在photoshop中设计了一个网站,现在我试图将设计转换为Wordpress模板。除了一件事外,这一切都很顺利。我不知道如何为我的图像创建这种边框。这可以通过使用CSS/jQuery技巧来完成吗?我们在图像上创建了一个边框。我附上了一张图片作为例子。复杂的图像边框,可以这样做吗?
图像周围的背景具有不同的颜色。
我们在photoshop中设计了一个网站,现在我试图将设计转换为Wordpress模板。除了一件事外,这一切都很顺利。我不知道如何为我的图像创建这种边框。这可以通过使用CSS/jQuery技巧来完成吗?我们在图像上创建了一个边框。我附上了一张图片作为例子。复杂的图像边框,可以这样做吗?
图像周围的背景具有不同的颜色。
您可以使用CSS3边框图像属性是: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>
如果您需要边框自动在图像上应用叠加,您可以将边框设为.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");
}
这是如何完成这件事只是一个选项。使用这种方法的图像必须是一个统一的大小,所以这可能无法帮助你得到你正在寻找的结果。
css可以做很多事情,但它不是photoshop ... –
是否有任何理由不能让边框成为图像文件本身的一部分? – taylorc93
@Marc B当然是的......我知道。但这不是问题。我的客户需要在CMS中上传他的照片,并且边框需要附加到图像上。因为我的客户端没有photoshop .... – Wouter