html - 单独 的重叠背景图像会产生比它们本身更暗的阴影

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 channel )，所以当它们重叠时它们会混合在一起，在你的情况下你实际上得到了双阴影。

如果您网站的其余部分有纯色背景(例如纯白色)，那么您可以将这些图像转换为不透明；您仍会获得阴影效果，但仅限于白色背景。