css - 如何制作类似iOS 7的半透明效果html

Question

我想知道是否有一种方法可以使用 HTML div 和 CSS 制作类似 iOS 7 的“磨砂玻璃”效果（半透明）。

Answer 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可以通过单击事件将类添加到元素中。相同的点击事件将显示覆盖的磨砂玻璃。