05-自适应高度透明层-兽

最新推荐文章于 2024-10-09 09:17:59 发布

pkmer

最新推荐文章于 2024-10-09 09:17:59 发布

阅读量106

点赞数

分类专栏： Css-红妆束阁文章标签： css

本文链接：https://blog.csdn.net/Q10CAU/article/details/104352378

版权

Css-红妆束阁专栏收录该内容

14 篇文章 0 订阅

订阅专栏

橘色的部分高度是随着文字内容自适应的.son容器不设置高度，颜色bg高度以及宽度设置为100%，然后son容器的整个高度由文字的内容撑开。Demo source code

在这里插入图片描述

文字部分relative的添加，能够提高文字部分的层级。

核心代码

.son{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    .son-bg{
      position: absolute;
      left: 0;
      bottom: 0;   // 需要设置位置
      background-color: orange;
      opacity: 0.6;
      width: 100%;
      height: 100%;  // 自适应文字高度
    }
    p{
      position: relative; // 能提高层级
      color: white;
      font-size: 18px;
      text-align: center;
    }
  }