Question

我遇到了重叠背景图像的问题，这些图像在重叠时会产生较暗的阴影，而不会产生不均匀的阴影。

我有一个高度灵活的盒子，带有阴影的透明背景图像可以创建漂亮的边框。该框基本上是3个元素。

您可以在此处找到包装盒左下角的图片：http://img251.imageshack.us/i/overlappingbgs.png/

这里的个人背景： http://img822.imageshack.us/g/bgtopm.png/

包装盒的代码：

<div class="centerbox"> <!-- Background image fixed at the bottom. -->
   <div class="head">   <!-- Background image fixed at the top. -->
      ...
   </div>
   <div class="body">   <!-- Vertically repeated background image. -->
      ...
   </div> 
</div>

正如您所看到的，当底部和重复的中间图像重叠（红色区域）时，会出现一个较暗的阴影，因为底部的背景图像太高了。

我无法使图像变小，因为当元素中的最后一个元素有一个margin-bottom设置时，有时会在阴影中产生间隙。

有任何建议或建议如何解决这个问题？

Answer 1

那些png文件是半透明的（它们有alpha通道），所以当它们重叠时它们会混合在一起，在你的情况下你会有效地获得双重阴影。

如果您的网站其余部分有纯色背景（例如纯白色），那么您可以将这些图片转换为不透明;你仍然会得到阴影效果，但只能在白色背景上。

Answer 2

对于这种情况，您不能只为class =“body”添加纯色背景色吗？

单独的<div> s的重叠背景图像会产生比自身更暗的阴影</div>

2 个答案: