Тег img внутри элемента canvas выделен серым цветом в firebug.Главным образом это происходит из-за плохого значения стиля, такого как display: none, opacity: 0 или height и width, равного нулю.
Но из того, что я вижу, это не так в моемсценарий.Я прошел много проверок, чтобы проверить это, но не могу понять, почему он скрыт.
<!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>