Question

我有Codepen的动画背景（下面的链接）但是我不能让我的文本浮在背景前面。我没有包括js，因为我认为它不会有帮助

Codepen：https://codepen.io/zessx/pen/ZGBMXZ

屏幕截图：https://gyazo.com/37568fdb9681e4c9d67d4d88fc7658ba

我尝试过使用z-index并且使用绝对位置也没有帮助。

Index.html注意：我删除了无关的代码

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>
        <div id="bg"></div>

        <div class="content w3-content" style="width: 80%;margin-left: 10%;">
            <h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
        </div>

    </body>

</html>

style.css

.bg {
    z-index: 1;
    background: -webkit-radial-gradient(center ellipse, #721B94 0%, #210627 100%) no-repeat center center fixed;
    background: radial-gradient(ellipse at center, #721B94 0%, #210627 100%);
    overflow: hidden;
    }

body    {
    margin: 0;
}

.content    {
    position: absolute;
    z-index: 100;
    overflow: hidden;
}

Answer 1

文本容器的固定位置将解决此问题。

<div  class="content w3-content" style="width: 80%;margin-left: 10%; position : fixed">
        <h1 class="font w3-jumbo w3-text-black">MOLLY URS</h1>
    </div>

我在这里工作了[link]

Answer 2

在大多数情况下，

position: absolute应与top，bottom，left和/或right配对。您缺少top:0或类似的。您不需要更改z-index。 .content稍后会出现在DOM中，因此它会在#bg上方“绘制”。

Answer 3

首先放置html文本，最后放置bg。将position: fixed;附加到文本容器。

CSS - 使内容面向动画背景

3 个答案: