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

显然，你的设计师具有打印后台....

好吧，还有那将最有可能在理论上的工作方式。但理论并不总是实际可行的。我怀疑你的愿望是拥有跨浏览器的能力，就像我们所有人一样。所以，从传统IE浏览器开始，抛出大多数新的CSS3技巧。忘了盒子的阴影，忘记疯狂的PNG透明没有黑客等等。

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

在这种情况下，你可以看到地平线上的风暴，所以运行掩护。回到设计师的身边，解释为什么这是一个明智的构思，并且是渐变的纹理，并帮助他们理解为什么我们的微软合作伙伴已经使这几乎不可能。就像一个完全闪存的网站，它可以以某种方式完成......但它可能不是时间和资源的最佳使用。网络不是打印的，它是动态的......当你在页面上放置某些东西时，它不会像在Illustrator中那样保持原样，也不能保证你的用户会在100＃光面上体验它与金属覆盖。是的，我是一名设计师之前，我是一名开发人员.....

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

Answer 5

虽然这是非典型的，但我会建议在图像的中心切割一个大方形的洞，这样您只剩下边缘本身和透明中心并保存为PNG。然后将中间部分本身保存为jpeg，并将jpeg直接放在PNG顶部的正确位置。

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