ionic——背景透明（字不透明），背景图透明（字不透明），背景淡入

1、背景模糊（字不透明）

background: rgba(0, 0, 0, 0.5)

2、背景图透明（字不透明）

<div style="position:relativez-index:0color:whitetext-align:rightmargin:1% 2%float:leftwidth:45%border-radius: 20px">

<div style="border-radius:

20pxposition:absolutewidth:100%height:100%z-index:-1opacity:0.5

filter:alpha(opacity=50)"></div>

<div style="font-size: 25pxpadding-top:10%padding-right:10%">

test</div>

</div>

3、背景的淡入

@keyframes fade-out {

0% {opacity: 0.3}/ 初始状态 透明度为0.3 /

40% {opacity: 0.6}/ 过渡状态 透明度为0.6 /

100% {opacity: 1}/ 结束状态 透明度为1 /

}

@-webkit-keyframes fade-out {/ 针对webkit内核 /

0% {opacity: 0.3}

40% {opacity: 0.6}

100% {opacity: 1}

}

.screen {

animation: fade-out/ 动画名称 /

animation-duration: 2s/ 动画持续时间 /

-webkit-animation:fade-out 2s/ 针对webkit内核 /

}

在标签加入class属性‘screen’（属性可自行更改）。

ionic 中子控制器怎么调用父控制器

在iOS7下，默认导航栏背景，颜色是这样的，接下来我们就进行自定义，如果你仅仅是更改一下背景和颜色，代码会很简单，不需要很复杂的自定义View来替代leftBarItem

更改导航栏的背景和文字Color

方法一：

[objc] view plaincopy

//set NavigationBar 背景颜色&title 颜色

[self.navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:20/255.0 green:155/255.0 blue:213/255.0 alpha:1.0]]

[self.navigationController.navigationBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],UITextAttributeTextColor,nil]]

效果如下：

我们把背景改成了蓝色，title文字改成了白色，是不是很简单呢？NavigationBar极其push过去的子页面也会是你修改后的背景颜色

方法二：

[objc] view plaincopy

//设置NavigationBar背景颜色

[[UINavigationBar appearance] setBarTintColor:[UIColor redColor]]

//@{}代表Dictionary

[[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor whiteColor]}]

在导航栏使用背景图片：

如果您的应用程序使用了自定义图像作为栏的背景，你需要提供一个“更大”的图片，使其延伸了状态栏的后面。导航栏的高度现在是从44点（88像素）更改为64点（128像素）。

仍然可以使用了setBackgroundImage：方法来指定自定义图像的导航栏。下面是代码行设置背景图片：

[objc] view plaincopy

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault]

在 loading 的时候，总是有一层白色背景在 loading 图片后面，如下图：

如果是在 IOS 上，这样的效果很原生，非常漂亮，但是如果你不想要这个白色的背景，那可以通过修改 scss 变量来进行设置。

打开 theme 文件夹下的 variables.scss ，设置如下变量，即可移除背景以及背景阴影了：

---