如何通过css添加一个大的褪色文本背景？ [英] How can I add a large faded text background via css?

问题描述

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

I'm looking to create a Zune/Microsoft-style oversized title in CSS so that a div has a semi-transparent text behind it.

任何想法？我希望保持它作为不可靠的插件和图像尽可能 - 但重要的是，文本可以溢出（不可见），它可以改变（可能由JS）。它必须能够稍微溢出而不出现在div之外;也就是说，注意底部的文本字母;这相当于在CSS中设置 bottom：-5px;

Any ideas? I'm hoping to keep it as unreliant on plugins and images as possible — but it's important that the text can overflow (invisibly), and that it can be changed (probably by JS). It must be able to overflow slightly without appearing outside the div; that is, notice the bottom of the "text" letters; this is the equivalent of setting bottom: -5px; in 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;
}

... $ c> div也是 overflow：hidden; 但是... Alas。它不隐藏。

...inside an about div that is also overflow: hidden; but... Alas. It does not hide.

谢谢！

推荐答案

我知道答案已被接受对你的问题已经，但我想我可以提供我的两分钱，只是为了完整性。

I understand that an answer has been accepted for your question already, but I thought I could provide my two cents, just for the sake of completeness.

虽然没有固有的问题，创建一个额外的< div> 元素来保存文本，我更喜欢使用 :: after 伪元素创建一个。它可能是（IMHO）语义更正确，但它确实取决于你想要的文本作为什么目的。

While there is no inherent problem with creating an additional <div> element to hold the text, I prefer using the ::after pseudo-element to create one. It's probably (IMHO) more semantically correct, but it really depends what purpose you want the text to serve as.

在我的例子中，我把你想要的文本出现在HTML数据属性的背景中，例如 data-bg-text ：

In my example, I have placed the text you want to appear in the background in a HTML data- attribute, say, 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 data- attribute：

And for your CSS, you simply have to create a pseudo-element, and assign content from the custom HTML data- attribute:

.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/

See the fiddle here - http://jsfiddle.net/teddyrised/n58D9/

这篇关于如何通过css添加一个大的褪色文本背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！