如何制作类似iOS 7的半透明效果html [重复]答案

【问题标题】：How to make an iOS 7-like translucency effect html [duplicate]如何制作类似iOS 7的半透明效果html [重复]
【发布时间】：2014-08-09 01:23:43
【问题描述】：

我想知道是否有办法使用 HTML div 和 CSS 制作类似于 iOS 7 的“毛玻璃”效果（半透明）。

【问题讨论】：

标签： css html translucency

【解决方案1】：

这是可能的。检查jsfiddle：http://jsfiddle.net/jawilliams346614/jmbsch96/

HTML

<div class="ios-container ios-blur">
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
    <div class="ios-items">&nbsp;</div>
</div>
<div class="ios-frost">&nbsp;</div>

CSS

.ios-container {
    width: 400px;
    height: 400px;
    background: url(http://www.hdwallpapers.in/walls/ios_7_galaxy-wide.jpg);
    z-index:1;
}
.ios-items {
    background: #f00;
    width:80px;
    height:80px;
    margin:10px;
    box-sizing:border-box;
    float:left;
    border-radius: 3px;
}
.ios-blur {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index:5;
}
.ios-frost {
    height:200px;
    width: 400px;
    position:absolute;
    top:0;
    left: 0;
    background: rgba(255,255,255,0.3);
}

ios-blur 类可以通过点击事件添加到元素中。相同的点击事件将显示覆盖的磨砂玻璃。

【讨论】：

不适用于 IE 和 FireFox。