Question

我不是html / css的人，但是通常这样做的人都退出了，因此落入了我的腿。

我有一个页面，其中有一个背景图像填充整个页面。我在网上找到了一些示例CSS来做到这一点：

html {
        background: url(background.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

我现在想做的是在此页面上覆盖一些文本，使其显示在页面底部的中心位置（不正确地位于底部，可能距底部向上50 px）。我尝试了很多方法，但似乎无法完全正确。

Answer 1

根据您的目标，可以使用position: absolute的组合并设置bottom和left属性，如下所示：

body {
  background: skyblue;
}

.footer-text {
  display: block; /* just so IE will correctly render it */
  position: absolute;
  z-index: 1000;
  bottom: 50px;
  left: 0;
  width: 100%;
  
  text-align: center;
}

<footer class="footer-text">footer text</footer>

Answer 2

html：

<body>    
  <div class="bottomme">
    <p>I'm some text at the bottom of the page</p>
  </div>
</body>

css：

html 
{
   background: url(https://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  font-size:16px;
    }

body
{
  width:100%;
  height:100vh;
  margin:0;
  border:1px solid red;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.bottomme
{
  font-size:3rem;
  line-height:1.25em;
  color:white;
  text-align:center;
  margin-bottom:1em;
  border:1px solid blue;
}

背景位置：https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

将div推至页面底部：https://codepen.io/carolmckayau/pen/bmaOyK

Answer 3

在不知道代码的情况下，我的建议是将文本添加到其自己的标签（例如p标签<p>your text here</p>）中，然后使用

定位文本

position: absolute; 
bottom: 50%; /* Depending on how low/high you want the text */
left: 50%;
transform: translate(-50%, -50%);

W3schools.com在此提供了一个很好的示例：https://www.w3schools.com/howto/howto_css_image_text.asp

CSS将居中文字覆盖在背景图像上

3 个答案: