0
基本上我有2列，左側有一個疊加的灰色圖像來創建一種模糊效果。當你將鼠標移到它上面時，它會變成透明的。它在Chrome/Safari中運行良好，但在Firefox中無法運行，我無法弄清楚原因。Css模板在所有瀏覽器中都不一樣（覆蓋div）
我上傳了一個鏈接到我的網站，以顯示我的意思：
http://generowicz.nl/showing_template.html
當在Firefox中看到的疊加圖像犯規適應和覆蓋整個左側。在#img 0：
html, body {
height: 100%;
margin: 0;
font-size: 15px;
\t font-family: Helvetica;
\t font-weight: lighter;
}
#left{
\t text-indent:1cm;
width: 20%;
height: 100%;
position: fixed;
\t background: rgba(51,51,51,1);
}
#right {
\t padding-top:2cm;
width: 80%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
\t position: absolute;
\t opacity: 0.4;
\t width:100%;
\t height:100%;
\t pointer-events:none;
\t -webkit-transition: opacity .25s ease-out;
\t -moz-transition: opacity .25s ease-out;
\t -o-transition: opacity .25s ease-out;
\t transition: opacity .25s ease-out;
\t color:#000;
}
#left:hover>#img {
opacity: 0;
}
h1{
\t font-size: 80px;
\t color:#CCC;
}
h2 {
\t font-size: 15px;
\t color: #CCC;
\t font-weight: lighter;
}
h3 {
\t font-size: 15px;
\t color:#CCC;
}
/* These are for main body */
h4 {
\t font-size: 15px;
\t color:#000;
}
h5 {
\t font-size: 15px;
\t color:#000;
\t font-weight: lighter;
}
\t
a.one:link {
\t text-decoration: none;
\t color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}
a.one:link:hover {
\t text-decoration: none;
\t color: #09F;
}
a.one:visited {
\t \t text-decoration: none;
\t color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
\t \t }
\t \t
a.one:visited:hover {
\t text-decoration: none;
\t color: #09F;
}
a.one:active { \t text-decoration: none;
\t color: #CCC;
-webkit-transition: all 0.5s ease-out; Saf3.2+, Chrome
-moz-transition: all 0.5s ease-out; FF4+
-ms-transition: all 0.5s ease-out; IE10
-o-transition: all 0.5s ease-out; Opera 10.5+
transition: all 0.5s ease-out;
}<body>
<div id="left"><img src="images/graysmall.png" name="img" width="93" height="55" id="img" />
<h1> B </h1>
<h2><a class="one" href="../index.html">Home</a></h2>
<h2><a class="one" href="../about.html">About Me</a></h2>
<h2><a class="one" href="../contact.html">Contact</a></h2>
</div>
<div id="right">
<table width="100%" border="0" align="left">
<tr>
<td width="5%"> </td>
<td width="95%" align="left" valign="top">
<!-- TemplateBeginEditable name="Content" -->
<!-- TemplateEndEditable -->
</td>
</tr>
</table>
</div>
</body>
我不知道爲什麼你要改變圖像的不透明度來實現這種效果。您可以移除圖像並在''div id =「left」>'background-color'上執行，並獲得相同的效果，用戶也不必下載不需要的圖像來加速下載。 – Andrew
爲什麼你不使用懸停不透明效果？ http://www.w3schools.com/css/css_image_transparency.asp – Rinos