The img tag inside the canvas element is greyed out in firebug. Mostly this

Question

0

Asked: May 27, 20262026-05-27T16:52:14+00:00 2026-05-27T16:52:14+00:00

The img tag inside the canvas element is greyed out in firebug. Mostly this

0

The img tag inside the canvas element is greyed out in firebug. Mostly this is due to a bad style value like display: none, opacity: 0 or a height and widthequal to zero.

But from what I can see, this is not the case in my scenario. I’ve gone through many checks to verify this, but can’t figure out why it’s hidden.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">        
        <style>
* {
    margin : 0;
}

html, body {
    height : 900px;
}

#wrapper {
    height : 80%;
    margin : 1% auto;
    width  : 960px;

    -webkit-border-radius : 12px;
       -moz-border-radius : 12px;  
            border-radius : 12px;       

    -webkit-box-shadow : 0 0 10px #CCC; 
      -moz-box-shadow  : 0 0 10px #CCC;
           box-shadow  : 0 0 10px #CCC; 

    -webkit-background-clip : padding-box;
       -moz-background-clip : padding;
            background-clip : padding-box;  
}

#wrapper > * {
    opacity : 0.6;
}

#wrapper * {
    opacity : 1.0;
}

#wrapper nav {
    height     : 20%;
    text-align : center;    
}

#wrapper nav ul {
    list-style : none;
    height     : 90%;
}

#wrapper nav ul li {
    display : inline-block;
    height  : 100%;
    padding : 0 5% 0 0;
    width   : 10%;
}

.link {
    border  : 1px solid #777;
    display : block;
    float   : left;
    height  : 100%;
    margin  : 5% 10% 10% 5%;
    width   : 100%;

    background-color :                              transparent;
    background-image : -webkit-linear-gradient(top, transparent, transparent);
    background-image :    -moz-linear-gradient(top, transparent, transparent);
    background-image :     -ms-linear-gradient(top, transparent, transparent);
    background-image :      -o-linear-gradient(top, transparent, transparent);
    background-image :         linear-gradient(top, transparent, transparent);
}

.link:hover {
    border : 1px solid #000;

    -webkit-border-radius : 12px;
       -moz-border-radius : 12px; 
            border-radius : 12px;   

    -webkit-box-shadow : 0 0 10px black;
       -moz-box-shadow : 0 0 10px black;
            box-shadow : 0 0 10px black;    

    -webkit-background-clip : padding-box;  
       -moz-background-clip : padding;
            background-clip : padding-box;

    -webkit-transition : all 0.3s ease-out;
       -moz-transition : all 0.3s ease-out;
        -ms-transition : all 0.3s ease-out; 
         -o-transition : all 0.3s ease-out;
            transition : all 0.3s ease-out; 
}
        </style>
    </head>
    <body>
        <div id="wrapper">
            <nav>
                <ul>
                    <li>
                        <a class="link" href="./?action=foo">
                            <canvas>
                                <img alt="foo" src="images/foo.png">
                            </canvas>
                        </a>
                    </li>
                    <!-- ... -->
                </ul>
            </nav>
        </div>
    </body>
</html>