div上的边缘图案？

Question

我正在与之合作的设计师给了我一个实施问题的怪物......

页面背景为灰色，其上面是前600个像素的皱巴巴的纸质纹理（不重复绘制设计元素）（1400像素宽;目前居中为非重复背景）。在底部是另一个带有更多文字的div - 带有阴影的，背景的复杂线条图案和翻边，略高于顶部div。

• 将顶部保存为JPG，将底部保存为透明PNG，将文件大小设为+ 1mb。
• 由于投影，将顶部保存为JPG而底部保存为JPG不能很好地工作。从技术上讲，将底部部分保存为一个切片，其中顶部的元素位于阴影下方，但它必须始终排列像素完美或者看起来很糟糕。在这一点上，我不妨将整个网站保存为一个大图像......
• 如果底部部分的背景为纯色，我可以将每条边设置为具有不同的透明PNG。但是，底部的线条图案意味着这不起作用。

我的问题最终是：

这些天人们如何扯掉边缘而没有让他们的网站成为一个大图像？

谢谢！

Screengrab：

Answer 1

CSS3确实提供了border-image属性，它应该能够帮助你解决翻录的边框效果（尽管如此，如果它是一个重复的图像会有所帮助。）

请参阅此处查看W3 specification。

然而它可能对你没什么用处，因为浏览器对这个功能的支持不是很好 - IE根本不支持它（甚至不支持IE9），虽然大多数其他浏览器都支持它，但它们都是目前在他们的支持方面存在差距，并且在CSS属性中需要供应商前缀。

请参阅CanIUse.com获取完整的浏览器支持表。

老实说，我认为你应该回到你的设计师那里，让他更容易合作 - 他可能只是创造了他认为看起来不错的东西，但却没有意识到他设计的局限性一起;如果你向他解释这个问题，他很可能会为你提供一些更有用的东西。

Answer 2

这里真的没什么可以做的。

页面边缘通过repeat-y理想地无缝重复，在您的情况下，它看起来像纹理是一个大图像。你要么必须满足于低于平均水平的表现，要么向设计师展示你的问题。

查看此博客以获得一个好例子：http://webapplicationdevelopmentindia1.blogspot.com/2011/05/php-developers-demand-are-increasing.html

Answer 3

您必须修复背景图像并使用整个图像（或顶部图像和底部图像）并使背景不滚动。或者你必须让他设计一个可以重复的模式然后使用更小的PNG。

Answer 4

显然，你的设计师有印刷背景......

好的，这些方法很可能在理论上有效。但理论并不总是实用的。我怀疑你的愿望是拥有跨浏览器功能，就像我们所有人都应该这样。所以，首先要抛出大多数新的CSS3技巧，这要归功于传统的IE。忘记盒子阴影，忘记疯狂的png tranparencies没有黑客等等。

你剩下的就是做一个巨大的.jpg背景。这将加载....最终......

在这种情况下，你可以看到地平线上的风暴，所以跑去寻找掩护。回到设计师那里，解释为什么这是一个聪明的想法，因为纹理层叠在渐变上，并帮助他们理解为什么微软的好友几乎不可能做到这一点。就像一个完全闪现的网站，它可以以某种方式完成....但它可能不是最好的时间和资源使用。网络不是打印的，它是动态的......当你在“页面上”放置某些内容时，它不会像在Illustrator中那样保持原样，也不能保证你的用户在100＃光泽下体验它带有金属覆盖层。是的，在我成为开发人员之前，我是一名设计师......

听起来像个警察？也许是。但我一直在你的鞋子里，建立信用卡网站。我的团队被迫浪费了数千美元的银行资金，试图让网站使用可能不应该在网上完成的设计，这要归功于印刷设计师做双重任务，在与技术人员交谈之前获得设计批准团队....当然，我们向管理层提出了各种选择。最终，它让老板因超出预算而被解雇。

Answer 5

虽然这是不典型的，但我建议在图像的中心切一个大的方形孔，这样你只能留下边缘本身和一个透明的中心并保存到PNG。然后将中心部件本身保存为jpeg，并将jpeg直接放在PNG的顶部，并保持在正确的位置。

这样，大多数非常大的PNG将包含非常少的数据并且文件非常小。显然，其余的数据将是jpeg，因此更小。