Html 为什么<；img>；画布内的标签在firebug中变灰了？
Html 为什么<；img>；画布内的标签在firebug中变灰了？,html,css,Html,Css,canvas元素中的img标记在firebug中变灰。这主要是由于错误的样式值，如display:none、opacity:0或高度和宽度等于零 但从我所看到的情况来看，我的情况并非如此。我已经通过了很多检查来证实这一点，但是我不知道为什么它被隐藏了 <!doctype html> <html> <head> <meta charset="utf-8"> <style> * {
canvasimgdisplay:noneopacity:0高度宽度<!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>
* {
保证金：0；
}
html，正文{
高度：900px；
}
#包装纸{
身高：80%；
利润率：1%自动；
宽度：960px；
-webkit边界半径：12px；
-moz边界半径：12px；
边界半径：12px；
-网络工具包盒阴影：0 10px#CCC；
-moz盒阴影：0 10px#CCC；
盒影：0 10px#CCC；
-webkit背景剪辑：填充框；
-moz背景剪辑：填充；
背景剪辑：填充框；
}
#包装器>*{
不透明度：0.6；
}
#包装纸*{
不透明度：1.0；
}
#包裹导航{
身高：20%；
文本对齐：居中；
}
#包装机导航{
列表样式：无；
身高：90%；
}
#包装器nav ul li{
显示：内联块；
身高：100%；
填充：0.5%0；
宽度：10%；
}
.链接{
边框：1px实心#777；
显示：块；
浮动：左；
身高：100%；
利润率：5%10%10%5%；
宽度：100%；
背景色：透明；
背景图像：-webkit线性渐变（顶部、透明、透明）；
背景图像：-moz线性渐变（顶部、透明、透明）；
背景图像：-ms线性渐变（顶部、透明、透明）；
背景图像：-o-线性梯度（顶部、透明、透明）；
背景图像：线性渐变（顶部、透明、透明）；
}
.link:悬停{
边框：1px实心#000；
-webkit边界半径：12px；
-moz边界半径：12px；
边界半径：12px；
-webkit盒阴影：0 10px黑色；
-moz盒阴影：0 10px黑色；
盒影：0 10px黑色；
-webkit背景剪辑：填充框；
-moz背景剪辑：填充；
背景剪辑：填充框；
-webkit过渡：所有0.3版本都可以轻松过渡；
-moz转换：所有0.3秒都会变慢；
-ms转换：所有0.3秒都会变慢；
-o型过渡：所有0.3秒都会变缓；
过渡：所有0.3秒放松；
}
-
noscript