gpt4 book ai didi

javascript - 将背景应用到 ionic 侧菜单

转载 作者:太空狗 更新时间:2023-10-29 12:33:59 29 4
gpt4 key购买 nike

我正在使用 ionic 和 angular.js,想知道如何将背景样式正确应用到侧边菜单。我确实有一个模糊的背景图像和悬停在背景图像上方的内容框。我的意图是打开左侧或右侧菜单时,背景保持固定,只有内容移动。

左边的屏幕截图显示了我目前的结果。背景图像附加到菜单的每个内容 View ,否则将其设置为透明会显示底层内容。右边的屏幕截图是一个简单的 html 模型,用于说明最终结果。

有人有什么建议吗?

Illustration

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="css/style.css" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>

<ion-side-menus class="sideMenus">

<ion-side-menu-content class="custom">
<h1>bdafs1</h1>
</ion-side-menu-content>

<ion-side-menu side="left" class="custom">
<h1>bdafs2</h1>
</ion-side-menu>

</ion-side-menus>
</body>
</html>

最佳答案

基本上,您需要将背景设置为正文,然后将其他所有内容设为透明。

body        {
background: url(http://i.imgur.com/hgzVvzN.jpg);
background-attachment:fixed;
background-position: center;
}

.pane, .menu, .view, .list, .item {
background: transparent;
}

关于javascript - 将背景应用到 ionic 侧菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24839998/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com