我正在尝试在我的元素中添加正常模糊和运动模糊效果。由于我们使用的是 Html 4.01，是否有任何解决方案可以在不使用 Html 5 的情况下添加模糊效果？尝试使用 Css 过滤器，但它不支持 firefox 和 IE。可能是一个简单的插件也可以解决跨浏览器问题？
最佳答案
我希望这个 Demo 助你一臂之力
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<!--[if lt IE 9 ]>
<body class="oldie">
<![endif]-->
<!--[if IE 9 ]>
<body class="ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]>
<!-->
<body class="modern">
<!--<![endif]-->
<div id="plane">
<header><span id="etbr">reflection<span id="refl">reflection</span></span>
</header>
</div>
</body>
</html>
CSS
html {
height: 100%;
}
body {
text-align: center;
line-height: 1;
margin: 0;
padding: 0;
background-color: #000;
height: 100%;
}
p {
line-height: 1.2;
}
#plane {
padding-top: 5%;
left: 0;
top: 10%;
width: 100%;
bottom: 0;
min-width: 1080px;
min-height: 600px;
position: absolute;
overflow: hidden;
overflow-x: visible;
}
#etbr, #refl {
color: #F0F;
font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-size: 200px;
background-color: #FFE;
font-weight: bold;
padding: 30px;
display: inline-block;
box-shadow: rgba(255, 255, 240, .2) 0 0 200px 100px, rgba(255, 255, 240, .3) 0 0 40px, inset rgba(0, 0, 0, .8) 0 0 20px;
border-radius: 30px;
position: relative;
}
#refl {
position: absolute;
z-index: -1;
top: 100%;
left: 0;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
/*filter: url(filter.svg#blur); /* FF, Opera + IE10*/
-webkit-filter: blur(2px);
/* webkit */
box-shadow: inset rgba(0, 0, 0, .8) 0 0 20px, inset #000 0 50px 100px;
}
.modern #refl {
opacity: .25;
}
.ie9 #refl {
margin-top: 20px;
margin-left: -10px;
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
margin-top: -20px;
margin-left: -7px;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000) progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}
关于javascript - 是否可以在不使用html5的情况下在IE8和其他主流浏览器中实现模糊效果和运动模糊效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23250361/