css - 具有透明模糊背景的按钮

Question

我不知道如何为某些像 iOS7 那样具有圆 Angular 和透明模糊背景的按钮创建 css 类代码。
示例图片:
http://i.stack.imgur.com/n3mLR.jpg

Answer 1

简短的回答是你不能，至少不能以任何动态的、跨浏览器兼容的方式(除非你只是模糊 SVG，即使那样支持也是可疑的)。 Firefox 没有与 -webkit-filter: blur(); 类似的东西，如果我没记错的话，要在 IE 或 Opera 中实现任何类似的东西将意味着一堆特定于浏览器的 hack。

filter 表明我们正在朝着这样的一天迈进，但在那之前，纯 CSS 中只有静态解决方法是可能的。 (对于 JavaScript 替代方案，BlurJS 以前对我来说效果很好，但它也有其局限性。)

如果您还希望页面的背景模糊，一种方法是在 Photoshop 中创建模糊背景，将其设置为您的 body 或任何 div，然后设置您的样式像这样的按钮:

button {
    /* For your border-radius: */
    border-radius: 4px;
    /* This will offer the illusion that it's adopting the
    background beneath it as its own but lightening it --
    almost like IOS. */
    background: #fff;
    opacity: .4;
}

/* Then maybe something like */
button:active {
    background: #000;
    opacity: .4;
}

但也许您希望您的原始背景图像清晰可见，并在其上方有一个模糊的按钮。好吧，如果您知道您的按钮与窗口顶部的距离始终为 Npx，并且您知道您的按钮的高度始终为 60px，那么您可以剪切一个 全宽 60px 背景图像中距离模糊图像顶部 Npx 高的水平 strip 。然后将它们都设置为:

.backgroundDiv {
    background: url('path/to/my/originalImage.jpg') center center no-repeat;
    background-size: cover;
 }

.button {
    background: url('path/to/my/blurredImage.jpg') center center no-repeat;
    background-size: cover;
}

这些是您将如何做的基石；可能这些和 JS 的一些组合可以达到理想的审美。但买者自负:过多的大图像不利于加载时间。