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

回答

相关问题