实现遮挡层

news2025/1/24 5:45:29

css实现遮挡层

position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0.5;
    background-color: gray;

<div class="mask"></div>

vue3 teleport 实现

<template>
  <div class="box">
    <p>这里是box</p>
    <div class="inner">
      <p>这里是inner</p>
      <teleport to="body">
        <div class="mask">
          <div class="mask-content">这里是teleport</div>
        </div>
      </teleport>
    </div>
  </div>
</template>

标签中to属性，可以是任意得值，如 to=“body” ，最后会将标签中得内容归属与body下，作为body的子元素，跟teleport标签实际写在什么位置无关
效果图

.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.3);
  color: red;
}
  /* 实现遮挡层内容水平垂直居中1 */
/*.mask-content {
  position: absolute;
  width: 150px;
  height: 40px;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}*/
 /* 实现遮挡层内容水平垂直居中2 */
/* .mask {
 	display: flex;
 }
.mask-content {
  width: 150px;
  height: 40px;
  margin: auto;
}*/
 /* 实现遮挡层内容水平垂直居中3 */
.mask {
 	display: flex;
  	justify-content: center;
  	align-items: center;
 }
.mask-content {
  width: 150px;
  height: 40px;
}