1.实现目标：
在cover-view组件内实现如上效果
2.设计：
使得上层的字体可以覆盖下层的字体（使用z-index配置层级），达到目标效果
（ps.上图只是设想效果，实际上是可以完全覆盖住的）
3.代码实现：
wxml：
<live-player style='position:absolute;width:100%;height:800rpx;'> <cover-view style="position:absolute;bottom:40rpx;left:60rpx;background:#000;width:90%;height:200rpx;"> <cover-view class='name_and_content'>{{name}}：{{content}}</cover-view> <cover-view class='name'>{{name}}：</cover-view> </cover-view></live-player> |
js：
Page({ data: { name: "河马Shawn", content: "富强民主文明和谐自由平等公正法治爱国敬业诚信友善。" },}) |
wxss：
.name{ position: absolute; display: inline; color: yellow; z-index: 1;}.name_and_content{ color: white; white-space: normal; position: absolute; left: 0; top : 0; width: 100%; height: 100%; z-index: 0;} |
4.实现效果图：
以上就是利用cover-view组件重叠的方式实现目标效果。
在此感谢“铭锋科技”前些日子解答我的提问