如何正確覆蓋具有透明背景的圖像？

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