Ionic之ui-sref引入图片，图片部分挡住解决方案

最新推荐文章于 2025-08-07 23:59:18 发布

转载最新推荐文章于 2025-08-07 23:59:18 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liziyou/p/6490069.html

文章标签：

#ui

本文介绍了一个Ionic应用中图片显示不全的问题及其解决方案。通过调整CSS样式中的高度参数，可以确保图片完整显示而不被上方元素遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ionic图片设置大小跟图片像素相同,但是使用ui-sref="parkInfo"上半部分图片会挡住，增加height的高度，就可以显示原本图片

页面：

  <ion-content>
        <div><a href="views/haha/haha.html">这是首页</a></div>
        <ion-list>
            <ion-item class="car-bindCarNu" ui-sref="bindCar"></ion-item>
            <ion-item class="car-parkInfo" ui-sref="parkInfo"></ion-item>
            <ion-item class="count-mouthContinue" ui-sref="parkInfo"></ion-item>
            <ion-item class="ionic-merchan" ui-sref="parkInfo"></ion-item>

        </ion-list>
    </ion-content>

css：

.car-parkInfo{
    background: url("../images/parkInfo.png") no-repeat center;
    width:134px;
    height:200px;
    margin-left: 200px;
    margin-top: -200px;
}

结果截图