在整页、变暗、模糊的背景图像上添加居中文本？

Posted 2023-03-06

【中文标题】在整页、变暗、模糊的背景图像上添加居中文本？

【英文标题】：Add centered text over a full-page, darkened, blurred background image?

【发布时间】：2014-09-17 23:17:07

【问题描述】：

我想创建一个背景图片填充整个页面高度的主页。在此之上，我需要添加白色文本和其他元素。

This website 是我想要实现的一个示例。

我想要的：

外观： 使用下面的 CSS，文本看起来很模糊。

#header

    opacity: 0.2;

#header-inside

    opacity: 1.0;
    /* background:none repeat scroll 0% 0% #efefef; */
    color:#fff;
    text-shadow:2px 2px #000000;

#all 
    background:url("back.jpeg") no-repeat fixed center center;
    /*background-repeat:repeat-x;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

【问题讨论】：

为什么要投反对票？请添加评论，以便我改进我的问题！

添加好字体并添加一些文字阴影

我无法添加图片，因为我没有足够的声誉:(

你可以链接到它，或者我可以为你添加它。我创建了一个建议的编辑，以便您可以看到更好的问题格式。也请发布您的 html。

@Keavon 正如我所说我正在使用drupal，所以HTML文件是由drupal根据请求创建的，所以我没有任何HTML文件..我怎样才能给你这些图像？我只需要 +3 就可以上传图片！ :(

【参考方案1】：

您需要使用屏蔽 div。看看这个 JSBin：http://jsbin.com/pefepuli/1/（要编辑 JSBin，请参阅 this link）

如果您想知道如何实现遮罩效果。这与掩码的background-color 属性有关。我们提供了一个rgba 值，它代表红绿蓝阿尔法。我们可以操纵背景颜色的 alpha 来改变它的不透明度。

HTML：

<div id="pic">
  <div id="mask">
    <div id="txt">Your text here</div>
  </div>
</div>

CSS：

body, html 
  height: 100%;
  width: 100%;


#mask 
  position: relative;
  height: 100%;
  background-color: rgba(0,10,20,.6);


#pic 
  background-image: url('http://d2z9qv80fklwtv.cloudfront.net/images/homescreens/7-n.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
  height: 782px;


#txt 
  position: relative;
  color: #FFFFFF;
  left: 150px;
  top: 150px;
  font-size: 20px;

【讨论】：

我尝试了你的演示，但是当我将我的 css 从“背景”更改为“背景图像”时，它在背景中什么都没有显示！为什么这样？谢谢

@harrythomas 很难说不知道你的整个 CSS 看起来如何。你能提供一个jsfiddle或jsbin吗？