Question

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

左侧屏幕截图显示了我到目前为止的结果。 backgroundimage附加到菜单的每个内容视图，否则将底层内容设置为透明。右侧屏幕截图是一个简单的html模型，用于说明最终结果。

有人有什么建议吗？

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

Answer 1

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

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

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

将背景应用于离子侧菜单

1 个答案: