爲什麼<img>畫布內的標籤在螢火蟲中變灰了？

canvas元素中的img標記在螢火蟲中變灰。大多數情況下，這是由於像display: none,opacity: 0或height和width這樣的糟糕樣式值等於零。爲什麼<img>畫布內的標籤在螢火蟲中變灰了？

但是從我所看到的情況來看，情況並非如此。我已經通過了許多檢查來驗證這一點，但無法弄清楚它爲什麼隱藏。

<!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>

來源

2011-12-19 0xbadf00d

除了瀏覽器不支持畫布以外，canvas元素中的所有內容都是隱藏的！

Look at the canvas tutorial for information about how to create an image in canvas

的noscript標籤做同樣的事情;）

來源

2011-12-19 09:07:25 noob

當然 - 你說得對。我的錯。 – 0xbadf00d 2011-12-19 09:10:04

爲什麼<img>畫布內的標籤在螢火蟲中變灰了？

回答

相關問題