重复背景重叠

Question

我有一个可以轻松重复的背景图案。问题是我在背景底部和背景右侧有阴影。我该如何重复这样的图像？我以为我可以从右边切下那块并重叠那个正确的阴影。或者使用整个图像是唯一的解决方案？

Answer 1

我的建议是使用box-shadow css属性为元素应用阴影，而不是为阴影重复图像。您可以使用以下内容制作阴影，例如：

-moz-box-shadow: 5px 5px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 5px 5px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 5px 5px 10px #000; /* Opera 10.5, IE9 */

当然，如您所见，这些属性不支持Internet Explorer 8及更低版本，但您可以使用css3pie，这是一个为Internet Explorer带来一些css3属性的脚本。是我经常使用的东西。

示例： http://jsbin.com/iquso3

另一种方法是使用现有的many中的jquery解决方案。

Answer 2

对于背景，使用整个图像是唯一的解决方案，因此您需要单独的图像才能在灵活尺寸的盒子上执行此操作。

你可以保留html并使用css添加shadown，或者使用javascript / jquery动态插入额外的div。