如何让透明父盒子中的子盒子垂直居中，同时保留父盒文本位置？

如何让透明父盒中的子盒，还让父盒文本位置不变？

通常情况下，为父容器设置透明度会导致文本和其他子元素也变得透明。为了解决这个问题，同时将子盒子垂直居中，可以使用以下方法：

• 为子元素使用：position: absolute
• 设置子元素的 top 值为 50%，使其水平居中
• 使用 transform: translatey(-50%) 将子元素在垂直方向上移动 50%，使其垂直居中
• 为父容器使用 rgba() 函数设置背景透明度，而不是 opacity 属性。rgba() 函数允许您指定一个透明度值，而 opacity 属性会影响所有子元素的透明度。

示例代码：

.container {
  width: 200px;
  height: 200px;
  background: rgba(0, 0, 0, 0.2);
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 10px;
}

登录后复制

这样，子盒就会垂直居中，而父盒的文本位置不变，且父盒具有 0.2 的透明度。

以上就是如何让透明父盒子中的子盒子，同时保留父盒文本位置？的详细内容，更多请关注米云其它相关文章！