CSS透明只適用於Mozilla

我想製作一個透明的盒子內容，當你將鼠標懸停在正常圖像上時。它與不透明的Mozilla完全兼容，但是當我添加其他內容以使其適用於其他瀏覽器時，沒有任何效果。CSS透明只適用於Mozilla

.BoxPage a { 
 
    zoom: 1; 
 
    width: 100%; 
 
    /* Theoretically for IE 8 & 9 (more valid) */ 
 
    /* ...but not required as filter works too */ 
 
    /* should come BEFORE filter */ 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
 
    /* This works in IE 8 & 9 too */ 
 
    /* ... but also 5, 6, 7 */ 
 
    filter: alpha(opacity=60); 
 
    /* Older than Firefox 0.9 */ 
 
    -moz-opacity: 0.6; 
 
    /* Safari 1.x (pre WebKit!) */ 
 
    -khtml-opacity: 0.6; 
 
    /* Modern! 
 
    \t /* Firefox 0.9+, Safari 2?, Chrome any? 
 
    \t /* Opera 9+, IE 9+ */ 
 
    opacity: 0.6!important; 
 
    -ms-filter: 」alpha(opacity=60)」; 
 
    -webkit-opacity: 0.6; 
 
} 
 

 
.BoxPage a:hover { 
 
    zoom: 1; 
 
    width: 100%; 
 
    /* Required for IE 5, 6, 7 */ 
 
    /* ...or something to trigger hasLayout, like zoom: 1; */ 
 
    /* Theoretically for IE 8 & 9 (more valid) */ 
 
    /* ...but not required as filter works too */ 
 
    /* should come BEFORE filter */ 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    /* This works in IE 8 & 9 too */ 
 
    /* ... but also 5, 6, 7 */ 
 
    filter: alpha(opacity=100); 
 
    /* Older than Firefox 0.9 */ 
 
    -moz-opacity: 1; 
 
    /* Safari 1.x (pre WebKit!) */ 
 
    -khtml-opacity: 1; 
 
    /* Modern! 
 
    \t /* Firefox 0.9+, Safari 2?, Chrome any? 
 
    \t /* Opera 9+, IE 9+ */ 
 
    opacity: 1!important; 
 
    -ms-filter: 」alpha(opacity=100)」; 
 
    -webkit-opacity: 1; 
 
}

<div class="BoxPage"><a>some text</a></div>

而且還透明度僅適用於Mozilla的。

來源

2017-09-15 Thranduil

在你的CSS節目的意見，不透明度爲前綴尚未需要很多年。你可以刪除所有這些。 – Rob

簡單：

element { 
    opacity: 0; 
    transition: opacity 1s ease-out; 
} 

element:hover { 
    opacity: 1; 
}

工作實例：

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: rgb(255, 0, 0); 
 
    opacity: 0; 
 
    transition: opacity 1s ease-out; 
 
} 
 
    
 
.box:hover { 
 
    opacity: 1; 
 
}

<h2>Hover over the space below...</h2> 
 

 
<div class="box"></div>

來源

2017-09-15 00:55:48 Rounin

感謝作品魅力 – Thranduil

我想後，你應該寫的「常規」 opacity最後在你的CSS規則，所有的前綴版本。

html, body { margin: 0; height: 100%; } .wrapper { background: green; height: 100%; } .inner { position: relative; top: 100px; height: 60%; margin: 0 100px 100px 100px; background: #fff; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; -ms-filter: 」alpha(opacity=60)」; -webkit-opacity: 0.6; opacity: 0.6; } .inner:hover { filter: alpha(opacity=60); -moz-opacity: 1; -khtml-opacity: 1; -ms-filter: 」alpha(opacity=100)」; -webkit-opacity: 1; opacity: 1; }

<div class="wrapper"> <div class="inner"></div> </div>

來源

2017-09-15 00:57:14 Johannes

可以使用rgba彩色背景，因此您可以添加opacity代替css使用opacity財產。見下面的代碼。


 
*{ box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0; margin: 0; } 
 
.box-wrap 
 

 
{ 
 
width: 100%; 
 
height: 150px; 
 
position: relative; 
 
background: url(https://i.stack.imgur.com/seaPw.png); 
 
} 
 
.box 
 
{ 
 
background-color: rgba(0,0,0,0.5); 
 
width: 100%; 
 
height: 100%; 
 
margin: 0 auto; 
 
color: #fff; 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
} 
 

 
.box:hover 
 
{ 
 
background-color: rgba(0,0,0,0); /* last value 0.5 represents opacity, first three numbers represents color value. */ 
 
transition: 0.5s ease; 
 
-webkit-transition: 0.5s ease; 
 
}


 
<div class="box-wrap"><div class="box">Hover me!</div></div>

來源

2017-09-15 02:19:27 bellabelle

CSS透明只適用於Mozilla

回答

相關問題