通过CSS查看效果（如iOS 7 / Aero）

Question

我正在尝试设计一个在Node-Webkit上运行的应用程序。我对背景有这个疯狂的想法，但我不知道如何用CSS实现这个。

这是应用程序现在的样子：

我想给所有深绿色/蓝色背景一个透视效果（有两个，顶部较暗，工具栏略亮）。像这样:(模拟，背景可能有点模糊）

我的目标不是拥有真正透明窗口的解决方案（如aero和iOS 7 / OS X 10.10）。具有预定义的静态背景图像的伪造效果很好（当窗口位置改变时不必移动）。 实现必须具有内存和性能效率。

我想通过将每个元素的类（如制表符，工具栏等）设置为＆＃39; bg-dark＆＃39;来指定背景的类型（暗或亮）。和＆＃39; bg-light＆＃39;。

我将采取的方法是：

1. 创建两个图像，一个用于较暗的背景，另一个用于较浅的背景。 （每个1920x1080px，因为我的应用程序必须很好地处理全屏）
2. 给每个元素一个背景类＆＃39; bg-dark＆＃39;或者＆＃39; bg-light＆＃39;。该类定义了CSS背景图像。
3. 使用javascript，对于某个类中的每个元素，计算background-position的值。

我在这种方法中看到的问题是，对于每个元素，webkit / blink必须将整个背景图像加载到内存中。这是真的？有没有更好，更理智的方式来做到这一点？它不必是跨浏览器友好的，因为我只需要它用于Node-Webkit应用程序（使用最新的闪烁引擎之一）。

修改 请注意，CSS不透明度不起作用。我希望背景有点模糊，因此简单的透明度是不够的。此外，如果所选标签实际上是半透明的（不透明度<1），则暗顶条会显示出来（这不是我想要的）。

Answer 1

在CSS中有一个名为透明度的功能。也许这会让你通过这个。

.transparent {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like 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=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

有了这个，你不需要加载另一个消耗内存和带宽的图像。

€dit：错过了来源：http://css-tricks.com/css-transparency-settings-for-all-broswers/

Answer 2

opacity是一种方法。

但请注意，它会使整个container透明。

例如：

container{
    /* IE 4-8 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* All Modern Browsers */
    opacity: 0.5;
}

为了使background透明化，我建议您使用透明background-color。

AS

container{
background:rgba(150,255,255,0.5); /*IE 9+*/
}

rgba代表red,green,blue & alpha。我认为这就是你要找的东西。

希望它能帮到你。

Answer 3

  

请监控#issue132。   这将是一个特色。