如何通过css添加大型褪色文本背景？

Question

我想在CSS中创建一个Zune/Microsoft风格的超大标题,以便div后面有一个半透明的文本.

有任何想法吗？我希望尽可能保持插件和图像的不可靠性 - 但重要的是文本可以溢出(不可见),并且可以更改(可能是由JS).它必须能够稍微溢出而不会出现在div之外; 也就是说,注意"文字"字母的底部; 这相当于bottom: -5px;在CSS 中设置.

这就是我在考虑的问题:

#about_big {
    font-family: "Proxima Light", sans-serif;
    font-size: 2000%;
    color: rgba(100, 100, 100, .5);
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
}

......在一个aboutdiv 里面,overflow: hidden;但也是......唉.它没有隐藏.

谢谢!

Answer 1

我知道你的问题已经接受了答案,但我认为我可以提供两分钱,只是为了完整起见.

虽然创建一个额外的<div>元素来保存文本没有固有的问题,但我更喜欢使用::after伪元素来创建一个.它可能(恕我直言)在语义上更正确,但它实际上取决于你希望文本用作什么目的.

在我的示例中,我将要在背景中显示的文本放在HTML数据属性中,例如data-bg-text:

<div class="bg-text" data-bg-text="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.
</div>

对于CSS,您只需创建一个伪元素,并从自定义HTML数据属性中分配内容:

.bg-text {
    background-color: #aaa;
    overflow: hidden;
    padding: 20px 20px 100px 20px;
    position: relative;
    width: 400px;
}
.bg-text::after {
    color: #fff;
    content: attr(data-bg-text);
    display: block;
    font-size: 80px;
    line-height: 1;
    position: absolute;
    bottom: -15px;
    right: 10px;
}

请参阅此处的小提琴 - http://jsfiddle.net/teddyrised/n58D9/或查看下面的概念验证示例:

.bg-text {
    background-color: #aaa;
    padding: 20px 20px 100px 20px;
    position: relative;
    width: 400px;
    overflow: hidden;
}
.bg-text::after {
    color: #000;
    content: attr(data-bg-text);
    display: block;
    font-size: 80px;
    line-height: 1;
    position: absolute;
    bottom: -15px;
    right: 10px;
}

<div class="bg-text" data-bg-text="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.</div>

Answer 2

这是我的解决方案.在jsfiddle中预览

.about_box {
  z-index: 5;
  width: 728px;
  height: 400px;
  position: relative;
  background: #0099ae;
  overflow: hidden;
}

#about_small {
  z-index: 7;
  position: relative;
  top: 0;
  left: 0;
  color: #f7f7f7;
  padding: 20px;
}

#about_big {
  z-index: 6;
  font-family: Arial;
  font-size: 120px;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  padding: 0;
  margin: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

<div class="about_box">

  <div id="about_small">
    "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog"
  </div>
  <div id="about_big">
    text
  </div>

</div>

您可能想要尝试line-height或使用bottom负数#about_big来获取底部的背景文本.