透明PNG作为背景图像答案

【问题标题】：Transparent PNG as Background Image透明PNG作为背景图像
【发布时间】：2010-12-14 20:27:45
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

你能把这个问题的截图放在某个地方吗？仅凭解释就很难想象。谢谢！
"i've tried setting z-indexing and opacity"?通过 css 设置不透明度？
@o.k.w.，是的，有一个 CSS 不透明度：developer.mozilla.org/en/CSS/opacity
@Matt：是的，我知道。但我不认为它是 W3C CSS 规范的一部分，是吗？

标签： css png background transparency z-index

【解决方案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;}

【讨论】：

我喜欢这个答案。我在这个页面上使用了一个非常相似的概念：screenfeed.com/content。查看与缩略图相关的来源。
这就是我最终所做的。我只是说如果具有透明背景的元素位于图像的前面，它会表现得更好。
@Meander365 这正是上面两个例子所做的。在这两种情况下，“框架”都位于照片的顶部。

【解决方案2】：

在制作 PNG 时需要注意一些事项。

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

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

【讨论】：