如何通过CSS添加大型半透明文本背景？

Question

如何通过CSS添加大型半透明文本背景？

9

我想创建一个类似于Zune/Microsoft的CSS超大标题，使div后面有半透明文本。

有什么想法吗？我希望尽可能地不依赖插件和图像，但重要的是文本可以溢出（隐形），并且可以通过JS进行更改。它必须能够稍微溢出而不会出现在div外面；也就是说，注意“text”字母的底部；这相当于在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 内，该 div 也是 overflow: hidden;，但是... 哎呀，它没有被隐藏。

谢谢！

- j6m8

http://jsfiddle.net/znuXs/？ - monkeyinsight

4个回答

5

这是我的解决方案。在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或使#about_big中的bottom为负，以使背景文本位于底部。

- sampoh

1

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

<!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>

- allyourcode

抱歉，我在谈论溢出时可能有点不够明确 - 只要图像与背景颜色相同且不会溢出，这个方法就非常有效，但我不确定是否符合情况。我已经编辑了我的问题以反映background-text可能会溢出，并且必须保持不可见。 - j6m8

更新了我的解决方案。只需要在.container中添加overflow: hidden就可以了。另一个小改动是将背景文字向下移动（以展示溢出效果），并在页面主体上添加了背景颜色，以确保溢出效果按预期工作。 - allyourcode

1

你的一个 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;
}

- Kevin Lynch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Terry · Accepted Answer

我知道您的问题已经有了一份被接受的答案，但为了完整性，我认为我可以提供我的两分钱。

虽然创建一个额外的 <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 data-属性：

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