如何使用CSS将文本叠加到另一个上?

eri*_*c01 11 html css

我有这个html文件,我想在其他文本上覆盖一些文本.我试图使用z-index属性但无法使其工作.我的代码中缺少什么?

非常感谢

这是代码

<html>
<head>
<style>
#overlay {
    z-index:100;
}
</style>

</head>
<body>
<div id='overlay'>overlayed text</div>

This is some dummy text

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Mar*_*era 11

你需要设置position: absolute.在z-index适用于不是静态定位的元素(见BoltClock的评论).

<html>
<head>
<style>
#overlay {
    background-color: #EEEEEE;
    position: absolute;
    z-index:100;
}
</style>

</head>
<body>
<div id='overlay'>overlayed text</div>

This is some dummy text

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

  • 它适用于任何非静态定位的元素.这意味着`relative`,`absolute`和`fixed`都适用. (3认同)

rai*_*son 6

您可以通过使用 :before 单独使用 CSS 来完成此操作

img.image:before {
    left: 0;
    content: "Coming Soon";
    background: rgba(255, 255, 255, 0.59);
    color: #000;
    width: 100%;
    height: 100%;
    line-height: 2.5;
    font-weight: 600;
   position: absolute; 

}
Run Code Online (Sandbox Code Playgroud)