8

div の背後に半透明のテキストがあるように、CSS で Zune/Microsoft スタイルの特大タイトルを作成しようとしています。

例

何か案は？プラグインや画像にできるだけ依存しないようにしたいと考えていますが、テキストが (見えないように) はみ出してしまう可能性があり、(おそらく 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;
}

about...でもあるdivの内部ですoverflow: hidden;が...悲しいかな。隠れません。

ありがとう！

4

4 に答える 4

15

あなたの質問に対する回答はすでに受け入れられていることを理解していますが、完全を期すために、2セントを提供できると思いました.

<div>テキストを保持するための追加要素を作成することに固有の問題はありませんが、::after疑似要素を使用して作成することをお勧めします。おそらく（IMHO）意味的にはより正しいですが、テキストをどのような目的で使用するかによって異なります。

私の例では、背景に表示したいテキストを HTML の data- 属性に配置しました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>

于 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

別の DEMO http://jsfiddle.net/FkE2V/と div で重複しています

#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 に答える
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 に答える