透明PNG作为背景图像

发布于 2024-08-10 13:31:32 字数 180 浏览 4 评论 0原文

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

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

我尝试过设置 z 索引和不透明度,但由于不透明度设置,我可以让图像通过其明显透明的方式显示。

有什么想法吗?

I have an element with a transparent png as its background image - it's like a polaroid with the photo bit cut out so just the frame is showing.

With this as the background I then want a standard image to sit behind the element that has the transparent png background - to fit inside the frame.

i've tried setting z-indexing and opacity and although I can get the image to show through its obviously transparent because of the opacity settings.

Any ideas?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

瞎闹 2024-08-17 13:31:32

如果 .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;}

If .yourPhoto is a background image, you could do this:

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

Or you could use inline images and position both absolute:

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

.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}
三人与歌 2024-08-17 13:31:32

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

  1. 切割时请确保
    背景已关闭。
  2. 导出为 png24。
  3. 如果您使用的是 ie6,则需要使用 twin-helix png 修复
  4. http://www.twinhelix.com/< /a>

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

there is a fair few things to look out for when doing PNG.

  1. when cutting make sure you
    background is off.
  2. export as png24.
  3. if your in ie6 you will need to use someting like twin-helix png fix
  4. http://www.twinhelix.com/

Try these steps. You should not have to change the opacity of your image as it will affect the whole image. When you use z-indexing you should also put in the position css element

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文