温泉的UI背景图片就像http://onsen.io/

想通这将是某个网站上的，因为所有的3例图像是这样的：温泉的UI背景图片就像http://onsen.io/

enter image description here

也许与PhoneGap的呢？不用担心。

我尝试设置项，导航以及各种项目透明，背景颜色都结束了，等

任何人都知道如何设置背景看起来像他们的例子吗？

我应该注意我正在使用一个轮播和列表，它不只是一个普通的页面，但菜单，列表，旋转木马项目等都显示背景颜色。

来源

2014-12-07 asked_io

框架使用它自己的CSS规则的逻辑，使某些事情工作。

刚开始我最近与框架内工作，所以我不知道所有的答案，或者如果这是实现全屏幕的背景图像的正确方法，但它的工作对我的项目:)

JcDenton86拉去从正确的方向开始，谢谢。

<ons-page modifier="full_bg"> 
    ... 
</ons-page>

的正确方法背景规则添加到<附件页>：

.page--full_bg__background { 
    background: url('img/bg.jpg'); 
}

这只会增加的背景图像与页面元素，但导航栏位于页面元素的顶部，所以你必须添加样式才能使其透明，然后才能在整个屏幕上看到背景。

.page-full_bg > .navigation-bar { 
    background-color: transparent; 
}

enter image description here

来源

2014-12-19 23:26:29

谢谢，<3温泉：D – 2014-12-20 02:38:51

小更多的测试，回来到有它显示，但似乎只是hackish的：

<ons-navigator var="myNavigator" ng-controller="MasterController" style="display:flex;background:url(http://192.168.1.12/news/images/card_lg/b5d7f649fd515a09b20f5d3c9b40a13b.jpg) no-repeat center; background-size: cover;"> 
    <ons-page style="background:none" > 
     <ons-toolbar style="background:none">

来源

2014-12-07 17:31:47

这似乎只是局部的，应用程序本身需要转到沉浸模式下，我得到了与一个PhoneGap的插件工作。但仍然黑客。 – 2014-12-07 18:55:48

对不起，但不适合我。 – Guy 2014-12-18 19:21:22

我一直在寻找一种方式来有自定义图像作为背景使用温泉UI我的应用程序。最后，设法通过使用<ons-page>元素上的modifier属性来完成此操作。例如

<ons-page modifier="appbcg"> 
    .... 
</ons-page>

，然后添加CSS规则的类：

.page--appbcg__background {}

这同样适用于按钮，列表等

来源

2014-12-19 13:55:16 JcDenton86

这一招的工作对我来说就像魅力。希望这有助于。

<ons-page style="background: url('img/bgimage.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover;"> 
//rest of your code . . 
</ons-page>

来源

2015-01-30 11:22:58

我正在寻找一些答案，这是不是在这个问题的文档。

这就是：

对于对矫正为onsenUI标签给出CSS样式：如页面，内容等...你必须在onsenUI.js文件中搜索它们。他们编写了这些修饰符，为您提供了一个自己修改onsenUI组件的解决方案。

示例：“.page - * __ background”将包装为您为*选择自己的名称并覆盖主样式主题。

如果你阅读了onsenui.js文件，你会发现所有可能的修饰符和它们的命名来编写这种特殊的语法。

了解他们的规则后，您几乎可以快速找到所有事情！

有点晚，但对于未来的搜索...

来源

2017-01-05 00:45:19 Jordan

温泉的UI背景图片就像http://onsen.io/

回答

相关问题