8

我希望在 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;但是...唉。它没有隐藏。

谢谢！

4

4 回答 4

15

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

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

于 2013-04-13T23:20:51.990 回答
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或bottom否定#about_big以使背景文本位于底部。

于 2013-04-13T09:45:34.927 回答
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>
于 2013-04-13T09:30:07.313 回答
1

You overlap on div with another 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;
}
于 2013-04-13T09:38:34.107 回答