透明PNG作为背景图像
-
19-09-2019 - |
题
我有一个以透明 png 作为背景图像的元素 - 它就像一张宝丽来,照片位被剪掉,所以只显示框架。
以此为背景,然后我想要一个标准图像位于具有透明 png 背景的元素后面 - 以适合框架内。
我尝试过设置 z 索引和不透明度,但由于不透明度设置,我可以让图像通过其明显透明的方式显示。
有任何想法吗?
解决方案
如果.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;}
其他提示
做 PNG 时有很多事情需要注意。
- 切割时,请确保您的背景关闭。
- 导出为 png24。
- 如果你在 ie6 中,你将需要使用像 twin-helix png 修复这样的东西
- http://www.twinhelix.com/
尝试这些步骤。您不必更改图像的不透明度,因为它会影响整个图像。当您使用 z 索引时,您还应该放入位置 css 元素
不隶属于 StackOverflow