html - 如何通过 css 添加大的褪色文本背景？

Question

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

有什么想法吗？我希望让它尽可能不依赖插件和图像——但重要的是文本可以溢出(不可见)，并且可以更改(可能由 JS)。它必须能够轻微溢出而不出现在div之外；也就是说，注意“文本”字母的底部；这相当于在 CSS 中设置 bottom: -5px;。

这是我正在考虑的:

#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;
}

...在 about div 中也是 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;
}

在这里查看 fiddle - 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>