z-index

图层~ z-index：

默认是0，最高无上限~

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
  <ul>
    <li><img src="images/img.png" alt=""></li>
    <li class="tipText">晚安</li>
    <li class="tipBg"></li>
    <li>时间：2022-3-3</li>
    <li>地点：比基堡</li>
  </ul>
</div>

</body>
</html>
复制代码

opacity: 0.5;/背景透明度/

复制代码
#content{
    width: 420px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 420px;
    height: 22px;
    top: 242px;
}
.tipText{
    color: white;
    /*z-index: 999;*/
}
.tipBg{
    background: black;
    opacity: 0.5;/*背景透明度*/
    filter: alpha(opacity=50);/*ie8及更早的版本支持*/
}
复制代码

 

posted @   少时凌云志  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
·  层次选择器
·  父级边框塌陷的问题
·  z-index及透明度
·  CSS学习笔记
·  2_CSS
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手