canvas 元素中的 img 标签在 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>
最佳答案
除了浏览器不支持 canvas 之外，canvas 元素中的所有内容都是隐藏的!!
Look at the canvas tutorial for information about how to create an image in canvas
noscript 标签做同样的事情；)
关于html - 为什么 Canvas 内的 <img> 标签在 Firebug 中变灰？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8559032/