

ons-toolbarに画像を埋め込みたいのですがどのようにすれば埋め込めますでしょうか？  
ご存知の方はご教授の程、よろしくお願い致します。


CC BY-SA 3.0
2015-01-23T07:29:58.323
5140
2015-01-24T23:22:03.707
2015-01-23T10:52:54.650
4978
7724
question
monaca onsen-ui
ons-toolbarに画像を埋め込む


background-image:url('url')をdivタグに入れる方法はどうでしょうか。

[code]

        <ons-toolbar>
        <div class="center" style="background-image:url('http://cdn.sstatic.net/ja/img/sprites.png?v=b55eefad6ab0')"></div>
        <div class="right">
          <ons-toolbar-button>
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
          </ons-toolbar-button>
        </div>
      </ons-toolbar>
    
[/code]


CC BY-SA 3.0
2015-01-23T09:15:31.600
5150
2015-01-23T09:15:31.600
7461
5140
answer


`modifier` 属性を併用してカスタマイズもできます。

[code]

    <ons-toolbar modifier="hogehoge">
      <div class="center">Center Area</div>
    </ons-toolbar>
    
[/code]

CSSでは、 `ons-toolbar` の場合 `navigation-bar--(modifier属性値)`のクラスを指定します。

[code]

    .navigation-bar--hogehoge {
      background:url('http://placehold.jp/150x50.png') no-repeat center center;
    }
    
[/code]


CC BY-SA 3.0
2015-01-24T18:21:57.027
5223
2015-01-24T23:22:03.707
2015-01-24T23:22:03.707
4978
7246
5140
answer