CSS在背景图像上覆盖居中文本[关闭]答案

【问题标题】：CSS to overlay centered text on a background image [closed]CSS在背景图像上覆盖居中文本[关闭]
【发布时间】：2018-10-17 03:47:56
【问题描述】：

我不是 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 像素）。我尝试了很多东西，但似乎无法完全正确。

【问题讨论】：

“我尝试了很多东西”……你尝试了什么？也许你已经很接近了；）
@lumio 喜欢 text-align:center; display:inline-block 绝对定位然后使用底部，我不知道，我不是前端的人，这东西对我来说是希腊语

标签： html css

【解决方案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;
}

&lt;footer class="footer-text"&gt;footer text&lt;/footer&gt;

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

在不知道代码的情况下，我的建议是在它自己的标签中添加文本（例如 p-tag <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

【讨论】：