css - 透明PNG作为背景图像

Question

我有一个带有透明 png 作为背景图像的元素 - 它就像一张宝丽来，照片位被剪掉了，所以只显示了框架。

以此为背景，然后我想要一个标准图像位于具有透明 png 背景的元素后面 - 以适合框架内。

我已经尝试设置 z-indexing 和不透明度，尽管由于不透明度设置，我可以让图像通过其明显透明的方式显示。

有任何想法吗？

Answer 1

如果 .yourPhoto 是背景图片，您可以这样做：

<div class="yourPhoto">
    <div class="yourPNGframeImage">
    </div>
<div>

或者您可以使用内联图像并将两个绝对位置：

 <div class="container">
      <img class="yourPhoto" src="">
      <img class="yourPNGframeImage src="">
 </div>

.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}

Answer 2

做PNG时有很多事情需要注意。

1. 切割时确保背景已关闭。
2. 导出为 png24。
3. 如果您在 ie6 中，您将需要使用类似双螺旋 png 修复
4. http://www.twinhelix.com/

试试这些步骤。您不必更改图像的不透明度，因为它会影响整个图像。当您使用 z-indexing 时，您还应该放入位置 css 元素