Vecike
Vecike
  • 发布:2016-10-07 05:48
  • 更新:2016-10-07 18:19
  • 阅读:2473

遮罩蒙版显示的不全

分类:MUI

下图是app的界面,为什么两个卡片后面的内容和标题栏都无法被遮罩蒙版覆盖呢?

我自己尝试着自己写遮罩蒙版,但是不会设置遮罩蒙版的样式,不知道该怎么来。

大神们能指点一下吗?困扰好久了,感觉这样非常不美观,麻烦大家了。

界面

<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">  
            <!--侧滑菜单部分-->  
            <aside id="offCanvasSide" class="mui-off-canvas-left">  
                <div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <div id="id-bar-top">  
                            <img id="id-bar-image" src="img/meuntopbackground.png" />  
                        </div>  
                        <ul id="id-bar-bottom">  
                            <li id="id-home"> 翻译  
                                <ul id="id-home-baidu">  
                                    <span style="padding-right: 0.6%;" class="fa fa-paw"></span> 百度  
                                </ul>  
                                <ul id="id-home-youdao">  
                                    <span class="fa fa-comments-o"></span> 有道  
                                </ul>  
                                <ul id="id-home-homophonic">  
                                    <span class="fa fa-leaf"></span> 谐音  
                                </ul>  
                                <ul id="id-home-idiom">  
                                    <span class="fa fa-edit"></span> 成语  
                                </ul>  
                            </li>  
                            <li id="id-found">  
                                发现  
                                <ul id="id-home-baidu">  
                                    <span style="padding-right: 2%;" class="fa fa-magic"></span> 技巧  
                                </ul>  
                                <ul id="id-home-excellent">  
                                    <span style="padding-right: 2%;" class="fa fa-star-half-o"></span> 精品  
                                </ul>  
                                <ul id="id-home-progress">  
                                    <span class="fa fa-toggle-off"></span> 进步  
                                </ul>  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
            </aside>  

            <!--主界面部分-->  
            <div class="mui-inner-wrap">  
                <header class="mui-bar mui-bar-nav">  
                    <a href="#offCanvasSide" id="id-bar-icon-menu" class="mui-icon mui-action-menu mui-icon-bars"></a>  
                    <h1 class="mui-title">首页</h1>  
                    <!--setting arrowdown more-filled--->  
                    <span id="id-bar-icon-more" class="mui-icon mui-icon-more-filled"></span>  
                </header>  
                <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">  
                    <div class="mui-scroll">  
                        <div id="id-card-youdao-out" class="mui-card">  
                            <div class="mui-card-content">  
                                <textarea id='youdaoOut' class="mui-input-clear" placeholder="" readonly="true" rows="10"></textarea>  
                            </div>  
                        </div>  
                        <div id="id-card-youdao-in" class="mui-card">  
                            <div class="mui-card-content">  
                                <textarea id='youdaoIn' type="text" class="mui-input-clear" placeholder="请输入要翻译的内容......" rows="5"></textarea>  
                            </div>  
                            <a id="id-toolbar-copy" href="#">  
                                <span id="id-card-click" style="margin-bottom: 2%; margin-left: 45.5%;" class="fa fa-2x fa-language"></span>  
                            </a>  
                            <ul class="mui-table-view mui-grid-view">  
                                <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                    <a id="id-toolbar-copy" href="#">  
                                        <span class="fa fa-file-text"></span>  
                                        <!--复制内容按钮-->  
                                    </a>  
                                </li>  
                                <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                    <a id="id-toolbar-paste" href="#">  
                                        <span class="fa fa-paste"></span>  
                                        <!--粘贴内容按钮-->  
                                    </a>  
                                </li>  
                                <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                    <a id="id-toolbar-clear" href="#">  
                                        <span class="fa fa-close"></span>  
                                        <!--清空内容按钮-->  
                                    </a>  
                                </li>  
                                <li class="mui-table-view-cell mui-media mui-col-xs-3">  
                                    <a id="id-toolbar-reading" href="#">  
                                        <span class="fa fa-lg fa-volume-down"></span>  
                                        <!--朗读按钮-->  
                                    </a>  
                                </li>  
                            </ul>  
                        </div>  

                        <section class="model-3">  
                            <div class="float-btn-group">  
                                <button class="btn-float btn-triger pink"><i class="icon-bars"></i></button>  
                                <div class="btn-list">  
                                    <a href="#" class="btn-float yellow"><i class="fa fa-search"></i></a>  
                                    <a href="#" class="btn-float blue"><i class="fa fa-cloud-download"> </i></a>  
                                    <a href="#" class="btn-float green"><i class="fa fa-paperclip">   </i></a>  
                                    <a href="#" class="btn-float purple"><i class="fa fa-line-chart"> </i></a>  
                                </div>  
                            </div>  
                        </section>  
                        <!-- off-canvas backdrop -->  
                        <div class="mui-off-canvas-backdrop"></div>  
                    </div>  
                </div>  
            </div>
2016-10-07 05:48 负责人:无 分享
已邀请:
shwanYu

shwanYu

请发代码

  • Vecike (作者)

    添加代码了,大神给看一下吧。

    2016-10-07 16:22

shwanYu

shwanYu

mui的js和css引入了吗?建议在官方demo基础上修改,可以少很多麻烦

  • Vecike (作者)

    当然引用了,不引用根本不会有效果的。

    2016-10-07 21:29

该问题目前已经被锁定, 无法添加新回复