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

先上效果

html代码

				

					
					

						
						

							
							

								
								

									

										
										
										
大学之道，在明明德。在亲民，在止于至善。
									
								
							
							

								
								

									

										
										
										
大学之道，在明明德。在亲民，在止于至善。
									
								
							
							

								
								

									

										
										
										
大学之道，在明明德。在亲民，在止于至善。
									
								
							
							

								
								

									

										
										
										
大学之道，在明明德。在亲民，在止于至善。
									
								
							
							

								
								

									

										
										
										
大学之道，在明明德。在亲民，在止于至善。
									
								
							
							
							

								
								

									

										
										
										
大学之道，在明明德。在亲民，在止于至善。
									
								
							
						
					
	
				

 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