CODEWITHSUNDEEP
htmlcss
JDS
JDS

Reputation: 16978

How to overlay image with transparent background properly?

I'm making a mini game with images overlayed on camera views. From this image it should be clear what I'm trying to do:

enter image description here

I just want the gun to be there without the background rectangle remainder (which I deleted in paint).

Here's the relevant code:

<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%);
}

Clearly my CSS isn't doing what I want.

Upvotes: 0

Views: 277

Answers (3)

Diego Hern&#225;ndez
Diego Hern&#225;ndez

Reputation: 792

The best way to verify that your image is transparent is to open the image in the browser (I tried it in opera and chrome) and if the image in its background is black, it is because it is transparent, if the image comes out with the squares, then it is not transparent

Example of image that was transparent but is not enter link description here

here the other case enter link description here

Upvotes: 1

Kieran
Kieran

Reputation: 23

Check that your "PNG" is actually a PNG.

Upvotes: 1

Libra
Libra

Reputation: 2595

Paint can't save transparent images. It looks like the image that you put there isn't actually transparent.

Upvotes: 1

Related Questions