mui开发记录（十）透明遮罩层 遮罩层上文字不透明

先上效果

html代码

				<div class="bar_pic" style="position: relative;z-index:1; width: 100%;">
					
					<div class="mui-slider">
						
						<div class="mui-slider-group mui-slider-loop">
							<!--支持循环，需要重复图片节点-->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#"><img src="images/top3.png" /></a>
								<div class="cover" >
									<div class="word">
										<h2></h2>										
										<h4>大学之道，在明明德。在亲民，在止于至善。</h4>
									</div>
								</div>
							</div>
							<div class="mui-slider-item">
								<a href="#"><img src="images/top2.jpg" /></a>
								<div class="cover" >
									<div class="word">
										<h2></h2>										
										<h4>大学之道，在明明德。在亲民，在止于至善。</h4>
									</div>
								</div>
							</div>
							<div class="mui-slider-item">
								<a href="#"><img src="images/top3.png" /></a>
								<div class="cover" >
									<div class="word">
										<h2></h2>										
										<h4>大学之道，在明明德。在亲民，在止于至善。</h4>
									</div>
								</div>
							</div>
							<div class="mui-slider-item">
								<a href="#"><img src="images/top2.jpg" /></a>
								<div class="cover" >
									<div class="word">
										<h2></h2>										
										<h4>大学之道，在明明德。在亲民，在止于至善。</h4>
									</div>
								</div>
							</div>
							<div class="mui-slider-item">
								<a href="#"><img src="images/top3.png" /></a>
								<div class="cover" >
									<div class="word">
										<h2></h2>										
										<h4>大学之道，在明明德。在亲民，在止于至善。</h4>
									</div>
								</div>
							</div>
							<!--支持循环，需要重复图片节点-->
							<div class="mui-slider-item mui-slider-item-duplicate">
								<a href="#"><img src="images/top2.jpg" /></a>
								<div class="cover" >
									<div class="word">
										<h2></h2>										
										<h4>大学之道，在明明德。在亲民，在止于至善。</h4>
									</div>
								</div>
							</div>
						</div>
					</div>	
				</div>

 css样式

		.cover{
				width: 100%;
				height: 100%;
				position: absolute;
				background: rgba(0,0,0,0.2);
				color: #fff;
				opacity: 1;
				bottom: 0;
			}
.word{
	
	margin-top: 10%;
	margin-left: 15%;	
	letter-spacing: 3px;
}
.word h2{
	margin-top: 20px;
}
.word h4{
	margin-top:20px;
}

其中遮罩层可以用rgba来控制，而要实现遮罩层中的文字内容不透明，可以通过opacity属性设置，即设置为1为不透明。

mui