下のようなボタンの素材（透明部分はトリミングしています）を  
![画像の説明をここに入力](https://i.stack.imgur.com/MATUl.jpg)

このように表示したいのですが  
![画像の説明をここに入力](https://i.stack.imgur.com/mUTzb.jpg)

下のように周囲に灰色の枠が表示されてしまいます。  
![画像の説明をここに入力](https://i.stack.imgur.com/h6VbO.jpg)

この灰色部分を消すことは可能でしょうか？

現状以下のように、テンプレートの「Train Catalog」を書き換え  
記述しています。

```

    <div data-role="page" id="detail-page"class="story-page">
        <div data-role="header" data-position="fixed">
            <img src="images/story_top.png" alt="" width="100%"> 
           <a href="list.html" ><img src="images/returnbutton.png" alt=""></a>
        </div>
    
        <div data-role="content">
            <img src="" alt="" id="story-image" width="100%">
        </div>
    </div>
    
```
CC BY-SA 3.0
2015-02-02T06:53:26.687
5754
2015-08-01T15:49:28.773
8011
question
monaca 画像
画像の周囲に、灰色の枠が表示されてしまう。
CSSを操作することでボタンの背景を透明にすることが可能です。下記のコードを試してみてください。同じく、Monacaのサンプルで作りました。

```

    <!-- TOP Page -->
    <div data-role="page" id="TopPage">
        <header data-role="header" data-position="fixed" data-theme="c">
            <h1>Monaca Memo</h1>
            <a href="#AddPage" class="ui-btn-right" style="background: transparent !important;" ><img src=".hoge.png"/></a>
        </header>
    </div>
    
```
CC BY-SA 3.0
2015-04-03T08:59:57.033
8722
2015-04-03T08:59:57.033
7871
5754
answer