Question

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

example

有什么想法吗？我希望尽可能保持插件和图像的不可靠性 - 但重要的是文本可以溢出（不可见），并且可以更改（可能是由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;
}

请参阅此处的小提琴 - 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置为否定，以便在背面找到背景文字。

Answer 3

这是一个完整的解决方案：

<!doctype html>
<html>
<head>
<title>Text Background</title>
<style>
body {
  background-color: #eee;
}
.container {
  position: relative;
  background-color: #ccc;
  z-index: -2;
  height: 25pt;
  width: 160pt;
  overflow: hidden;
}
.background-text {
  color: white;
  font-size: 20pt;
  position: absolute;
  z-index: -1;
  bottom: -8pt;
  right: 0;
}
</style>
</head>
<body>

<div class="container">
  <div class="content">
    Lorem ipsum dolor.
  </div>
  <div class="background-text">Background</div>
</div>

</body>
</html>

Answer 4

您在div上与另一个DEMO http://jsfiddle.net/FkE2V/

重叠

#container {
    width: 100px;
    height: 100px;
    position: relative;
}
#text, #other {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#other {
    z-index: 10;
    color:#f00;
}

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

4 个答案: