Jquery mobile 使导航栏透明

我有导航条。有两个选项卡。它们有两个图像而不是文本。但是，这会使图像显示在中间，并在选项卡中显示填充。 如何使此选项卡透明，以便仅显示图像

<div data-role="navbar" data-inset="true" data-filter="true" role="navigation" class="ui-navbar ui-mini" >  
    <img style="max-height:90%; max-width:100%;" src="Header_image.jpg" alt="image"/>
    <ul>
        <li><a href="HolidayList.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%;"  src="holiday_list_btn.png"/></a></li>
        <li><a href="ClosedLocations.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%;"  src="Closed_location_btn.png"/><!--CLOSED LOCATIONS--></a></li>         
    </ul>
</div>  

将以下CSS位添加到每个图像的

样式中：

因此，使用您的示例，它如下所示：

<div data-role="navbar" data-inset="true" data-filter="true" role="navigation" class="ui-navbar ui-mini" >  
    <img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;" src="Header_image.jpg" alt="image"/>
    <ul>
        <li><a href="HolidayList.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;"  src="holiday_list_btn.png"/></a></li>
        <li><a href="ClosedLocations.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;"  src="Closed_location_btn.png"/><!--CLOSED LOCATIONS--></a></li>         
    </ul>
</div>

这样做将更好地利用CSS，因为代码不必为每个图像重复&可以由一个CSS定义管理

一般来说，我建议您制定一个CSS规则，它会影响所有元素，如下所示：

<div data-role="navbar" data-inset="true" data-filter="true" role="navigation" class="ui-navbar ui-mini" >  
    <img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;" src="Header_image.jpg" alt="image"/>
    <ul>
        <li><a href="HolidayList.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;"  src="holiday_list_btn.png"/></a></li>
        <li><a href="ClosedLocations.html" class="ui-btn-active ui-state-persist"><img style="max-height:90%; max-width:100%; padding: 0px; margin: 0px; display: block;"  src="Closed_location_btn.png"/><!--CLOSED LOCATIONS--></a></li>         
    </ul>
</div>

---

不。不工作。我觉得这是导航栏的一个属性，我们必须更改。@PramodSetlur：检查我的编辑。我无意中设置了

cellpading

，而不是按原样设置

padding

。对无意中造成的混乱表示歉意。不，还是一样（不，外部css也没有帮助。导航栏本身有任何属性吗？尝试将css属性背景添加为透明

img {
    padding: 0px;
    margin: 0px;
    display: block;
}

* {
    padding: 0px;
    margin: 0px;
}