Question

我有这两个PNG图像（图像1：eyemasktrans，图像2：dialogue_ughhh），我已经在Photoshop中对其进行了编辑以使其透明。但是问题是当我尝试在Chrome上查看时，假定的透明图像似乎具有白色背景。他们有什么办法仅使用HTML来解决此问题吗？提前致谢！下面是我当前的代码：

我使用的其他图片：girl_sleeping

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .parallax {
      /* The image used */
      background-image: url("girl_sleeping.jpg");
      /* Set a specific height */
      min-height: 200px;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>

</head>

<body>

  <center> <img src="eyemasktrans.png" /> </center>
  <center> <img src="dialogue_ughhh.png" /> </center>

  <div class="parallax"></div>

</body>

</html>

Answer 1

您的eyemasktrans.png和您的dialogue_ughhh.png图像都很好。它们在PNG中具有正确的Alpha通道。

我认为您遇到的问题是.parallax div的大小不能完全调整，并且具有fixed和center的一些奇怪的背景配置，这会导致它出现就像您在页面上滚动时所覆盖的东西一样。

我不知道这里期望的效果是什么，但是如果您正确调整大小并适当设置z-index，就不会有问题。

此外，我建议您考虑将SVG用于此任务，因为无论如何您的所有艺术都是矢量。您将拥有更快的加载时间。

（问题在此处复制：http://jsfiddle.net/vr1qms9h/1/）

Answer 2

您可以使用opacity属性。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .parallax {
      /* The image used */
      background-image: url("http://thepotatoplace.ga/images/background.png");
      /* Set a specific height */
      min-height: 200px;
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.65;
    }
  </style>

</head>

<body>

  <center> <img src="eyemasktrans.png" /> </center>
  <center> <img src="dialogue_ughhh.png" /> </center>

  <div class="parallax"></div>

</body>

</html>

如何使用HTML将具有透明背景的PNG图像放置？

2 个答案: