onsen-ui 背景图片，如 http://onsen.io/答案

【问题标题】：onsen-ui background images like on http://onsen.io/onsen-ui 背景图片，如 http://onsen.io/
【发布时间】：2014-12-07 07:39:05
【问题描述】：

认为这将在网站上的某个地方，因为所有 3 个示例图像都是这样的：

也许它用phonegap完成了？不用担心。

我尝试将 ons-navigator 和各种项目设置为透明、背景色等。

有人知道如何将背景设置为看起来像他们的示例吗？

我应该注意我使用的是轮播和列表，它不仅仅是一个常规页面，而且菜单、列表、轮播项目等都显示背景颜色。

【问题讨论】：

标签： onsen-ui

【解决方案1】：

框架使用它自己的 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; 
}

【讨论】：

用于在<style>...</style>中添加样式； url(img/someImage.jpg) 没用。取而代之的是url(/img/someImage.jpg) 工作。（注意路径开头的/）。

【解决方案2】：

我正在寻找一种使用 Onsen UI 将自定义图像作为我的应用背景的方法。最后，通过在<ons-page> 元素上使用modifier 属性来设法做到这一点。比如

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

然后为类添加CSS规则：

.page--appbcg__background {}

按钮、列表等也是如此。

【讨论】：

【解决方案3】：

这个技巧对我来说就像一个魅力。希望这会有所帮助。

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

【讨论】：

【解决方案4】：

再进行一些测试以使其显示出来，但看起来很老套：

<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">

【讨论】：

这似乎只是部分，应用程序本身需要进入沉浸式模式，我得到了它与 phonegap 插件一起使用。但仍然很老套。

【解决方案5】：

我正在寻找一些不在此问题文档中的答案。

这里是：

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

示例：".page--*__background" 将被包装，供您为 * 选择自己的名称并覆盖主要样式主题。

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

了解了他们的规则后，您将能够快速获得几乎所有的机会！

有点晚了，但为了以后的搜索......

【讨论】：