Javascript 离子如何在浏览视图时保持固定背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27781956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic How to keep fixed background while browsing the views
提问by mmarques
I'm using a tabs template for an Ionic project and have set the a background image. However, when the transition throw states occurs, the background is also affected by the animation. I want that the background always stay fixed on entire application ( on transition throw states and sub-states).
我正在为 Ionic 项目使用标签模板并设置了背景图像。但是，当发生过渡抛出状态时，背景也会受到动画的影响。我希望背景始终固定在整个应用程序上（在转换抛出状态和子状态上）。
This project exemplifies the problem:
这个项目举例说明了这个问题：
I also tried to assign the background property to the body but it doesn't work.
我也尝试将背景属性分配给正文，但它不起作用。
So, does anybody know how to always keep the background image fixed and only animate the content ?
那么，有人知道如何始终保持背景图像固定并且只为内容设置动画吗？
回答by Andrew McGivery
So, there are some new complications because of some new features in beta 14, but you can still accomplish what you want using only CSS.
因此，由于 beta 14 中的一些新功能，出现了一些新的复杂情况，但您仍然可以仅使用 CSS 来完成您想要的操作。
See this pen:
看到这支笔：
http://codepen.io/andrewmcgivery/pen/azBjdB
http://codepen.io/andrewmcgivery/pen/azBjdB
Relevant CSS:
相关CSS：
body {
background:
url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-32.jpg) ;
background-attachment:fixed;
background-position: center;
}
body .view-container.tab-content {
background-color: transparent;
}
body .pane, .menu, .view, .list, .item {
background: transparent;
}
回答by Tiagojdferreira
I had a similar problem and the only thing I did was change the scss style to include the following class:
我遇到了类似的问题，我所做的唯一一件事就是更改 scss 样式以包含以下类：
.transparent {
background: transparent;
}
Which I added to the ion-view.
我添加到离子视图中。
回答by faby
I think that you can't achieve what you are trying to do because it's a javascript framework implementation. When you change url (e.g. "/sign-in") the framework preoload the html of that page and then replace all the html document with the new one using a transition. In this html is included the background also. I think that for your purpose you should implement your own function that (for example) replaces only the div container html with a transition. In this way the background should remain fixed.
我认为您无法实现您想要做的事情，因为它是一个 javascript 框架实现。当您更改 url（例如“/sign-in”）时，框架会预加载该页面的 html，然后使用转换将所有 html 文档替换为新文档。在这个 html 中也包含了背景。我认为为了您的目的，您应该实现自己的功能（例如）仅用过渡替换 div 容器 html。这样，背景应该保持固定。
