html 背景重于内容

nhhxz33t 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(117)

我正在创建一个非常简单的网页，目的是在以后的javascript中使用它，它是一个带有按钮的图像，稍后将执行功能，然而，当我能够居中背景时，它与内容重叠，不让我看到它或与它交互。

* {
  box-sizing: border-box;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
}

h1 {
  text-align: center;
}

.logo {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <title>Keyless Car</title>
</head>

<body>
  <div class="bg">
    <img src="https://via.placeholder.com/2000/0000FF/808080">
  </div>
  <div class="logo">
    <img src="https://via.placeholder.com/150/000000/808080">
  </div>
  <div class="container">
    <img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
  </div>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

这个想法当然是为了能够可视化所有的内容。作为一个侧记，我正在使用的图像，使按钮（容器）是在png，使它不会玷污我的背景

Html

来源：https://stackoverflow.com/questions/74817446/background-over-content

1条答案

按热度按时间

elcex8rz1#

这是因为你已经把.bg的position属性设置为fixed，一旦你这样做了，div就固定在左上角，并且占据元素堆栈顺序的最顶端，从而隐藏了其他元素。
请对代码进行以下更改，它应该可以正常工作。

* {
    box-sizing: border-box;
}

.bg {
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%;
    min-height: 100%;
    z-index:-1;
}

h1 {
    text-align: center;
}

.logo {
    padding-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    padding-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="estilo.css"> 
    <title>Keyless Car</title>
</head>
<body>
    <div class="bg">
        <img src= "https://via.placeholder.com/2000/0000FF/808080">
    </div>
    <div class="logo">
        <img src= "https://via.placeholder.com/150/000000/808080">
    </div>
    <div class="container">
        <img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
    </div>  
    <script type="text/javascript" src="script.js"></script>
  

  
  
</body>
  
  
</html>

赞(0）回复(0）举报 2022-12-16

我来回答

html 背景重于内容

1条答案

相关问题

热门标签

最新问答