设置遮罩层样式

最新推荐文章于 2022-04-13 13:59:37 发布

一个假的前端男

最新推荐文章于 2022-04-13 13:59:37 发布

阅读量337

点赞数

分类专栏：微信小程序 css 文章标签： css

本文链接：https://blog.csdn.net/IT_iosers/article/details/107918023

版权

微信小程序同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

css

23 篇文章 0 订阅

订阅专栏

如下图
在这里插入图片描述
html代码如下

//这段代码放置所有代码最前面
<view class="FEX">
	<view class="pop">
		<image src="{{'https://statics.zhuishushenqi.com'+data1.cover}}" class="tupi"></image>
	</view>
</view>

css代码

.FEX{
  position:fixed;
  z-index: 99;
  background: rgb(0, 0, 0,0.3);
  width: 100%;
  height: 100%;

  border: 1PX solid firebrick;

}

.pop {
  position: fixed;
  /* background: black; */
  top: 50%;
  left: 50%;
  height: 70%;
  width: 70%;
  z-index: 1000;

}

.tupi {
  position: relative;
  top: -50%;
  left: -50%;
  width: 100%;
  height: 100%;

}