onsen-ui背景图片,如http://onsen.io/

Question

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

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

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

有谁知道如何设置背景看起来像他们的例子？

• 我应该注意到我正在使用旋转木马和列表,它不仅仅是常规页面,而是菜单,列表,轮播项目等都显示背景颜色.

Answer 1

框架使用它自己的css规则逻辑来使某些东西工作.

我刚刚开始使用框架,所以我没有所有的答案,或者这是实现全屏背景图像的正确方法,但它适用于我的项目:)

JcDenton86让我开始朝着正确的方向前进,谢谢.

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

将背景规则添加到<ons-page>的正确方法:

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

这只会将背景图像添加到页面元素,但导航栏位于页面元素的顶部,因此您必须添加样式以使其透明,然后您才能在整个屏幕上看到背景.

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