如何正确覆盖具有透明背景的图像？

Question

我正在制作一个迷你游戏，图像覆盖在相机视图上。 从这张图片中应该清楚我想要做什么：

我只希望枪没有背景矩形剩余部分（我在油漆中删除）。

以下是相关代码：

<body>

    <!-- Camera -->
    <main id="camera">

        <!-- Camera sensor -->
        <canvas id="camera--sensor"></canvas>
        
        <!-- Camera view -->
        <video id="camera--view" autoplay playsinline></video>
        
        <!-- Camera output -->
        <img src="//:0" alt="" id="camera--output">

        
        <!-- Crosshair -->
        <img src="crosshair.png" class="crosshair" />
        
        <!-- Gun Model -->
        <img src="gun_model_1.png" class="gunmodel" />
        
        
        
        <!-- Camera trigger -->
        <button id="camera--trigger">SHOOT</button>

    </main>

    <!-- Reference to your JavaScript file -->
    <script src="app.js"></script>

    <!-- Reference to adapter.js -->
    <script src="adapter-min.js"></script>

</body>

CSS：

.gunmodel {
  content:"";
  position: absolute;
  top: 60%;
  left: 60%;
  display: inline;
  -webkit-transform: translateY(0%) translateX(0%);
}

显然我的 CSS 没有做我想做的事。

Answer 1

画图无法保存透明图像。 看起来你放在那里的图像实际上并不透明。

Answer 2

检查您的“PNG”是否实际上是 PNG。

Answer 3

验证您的图像是否透明的最佳方法是在浏览器中打开图像（我在opera和chrome中尝试过），如果其背景中的图像是黑色的，那是因为它是透明的，如果图像出现正方形，那么它是不透明的

透明但未在此处输入链接描述的图像示例

此处其他情况在此处输入链接描述

如何正确覆盖具有透明背景的图像？

问题描述

3 个解决方案

解决方案1
1 2019-10-10 21:14:13

解决方案2
1 2019-10-10 21:18:03

解决方案3
1 2019-10-10 21:21:01

如何正确覆盖具有透明背景的图像？

问题描述

3 个解决方案

解决方案1 1 2019-10-10 21:14:13

解决方案2 1 2019-10-10 21:18:03

解决方案3 1 2019-10-10 21:21:01

解决方案1
1 2019-10-10 21:14:13

解决方案2
1 2019-10-10 21:18:03

解决方案3
1 2019-10-10 21:21:01