下图是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>
Vecike (作者)
添加代码了,大神给看一下吧。
2016-10-07 16:22