离子如何在浏览视图时保持固定的背景

时间:2015-01-05 14:50:17

标签: javascript html css angularjs ionic-framework

我正在使用标签模板进行离子项目,并设置了背景图片。但是,当发生过渡投掷状态时,背景也会受到动画的影响。我希望背景始终固定在整个应用程序上(转换投掷状态和子状态)。

这个项目举例说明了这个问题:

  

linkhttp://codepen.io/anon/pen/ogYymB

我还尝试将背景属性分配给正文,但它不起作用。

那么,是否有人知道如何始终保持背景图像的固定并仅对内容进行动画处理?

3 个答案:

答案 0 :(得分:1)

因此,由于beta 14中的一些新功能,有一些新的复杂功能,但您仍然可以使用CSS完成您想要的任务。

见这支笔:

http://codepen.io/andrewmcgivery/pen/azBjdB

相关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;
}

答案 1 :(得分:0)

我认为你无法实现你想要做的事情,因为它是一个javascript框架实现。当您更改网址时(例如" /登录"),框架会预先加载该网页的html,然后使用转换替换所有html文档。在这个html中也包含了背景。 我认为,为了您的目的,您应该实现自己的功能(例如)仅使用转换替换div容器html。通过这种方式,背景应保持固定。

答案 2 :(得分:0)

我遇到了类似的问题,我唯一做的就是更改scss样式以包含以下类:

.transparent      {
    background: transparent;
}

我添加到离子视图中。