6

ここで私と一緒に耐えてください、しかしこのコードを仮定します：

<style>
  span {
    color: black;
    background-color: black;
  }
</style>
<span>Hello world</span>

こんにちは世界

次のような結果が得られます。

███████████</p>

フォント/行の高さではなく、文字の高さだけにスタイルを適用することは可能ですか？実際には、次のようになります。

█▄██▄▄▄▄██</p>

4

3 に答える 3

3

いいえ（とにかく背景色ではありません）。背景色は要素全体（スパン要素など）に適用されます。これは基本的に、CSSボックスモデルによって決定されるボックスです。W3Cからの公式の推奨事項では、ボックスモデルのコンテンツ、パディング、および境界領域を背景色で塗りつぶすように指定されています。CSS3の背景（推奨候補）は、背景色を適用する場所を制御するためのもう少し強力な機能を提供しますが、それほど多くはありません。

質問で示した効果が本当に必要な場合は、「短い」文字（「w」など）を「▄」に変換し、「高い」文字（「h」など）を次のように変換するJavaScript関数だと思います。 「█」はうまくいくでしょう。これがjsfiddleのデモです。

于 2012-08-06T03:37:24.727 に答える
1

CSSのみを使用する方法は考えられませんが、PHPでimagefontheightのような関数を使用できます：http：//php.net/manual/en/function.imagefontheight.phpそして指定されたフォントからブロック要素を動的に作成します..。。

于 2012-08-06T02:51:12.433 に答える
1

純粋にCSSで効果を得るには、次のことが必要です。

  1. わいせつに過剰な量の余分なhtmlマークアップ。
  2. キャラクター自体と比較して、背景の高さにわずかな不正確さを許容する意欲。
  3. 使用する特定のフォントを綿密にテストして、ブラウザ間でどのような結果が得られる可能性があるかを確認します。

言い換えれば、努力する価値は十分にあり、おそらく非常に短いテキスト文字列にのみ使用する必要があります。

これは、背景が文字にどのように適合するかを確認するために、単語の色を対照的に残したフィドルの例です。注：これは間違いなく、ブラウザとフォントが表示されているかどうかに基づいて、文字の上下の高さと間隔に多少のばらつきがあります。:before効果を実現するために疑似要素を使用するということは、古いブラウザー（IE7以下）に対応する必要があることを意味します。

これがフィドルの基本的なコードです。

<span>H</span><span class="short">e</span><span>l</span><span>l</span><span class="short">o</span><span class="short">w</span> <span class="short">w</span><span class="short">o</span><span class="short">r</span><span>l</span><span>d</span>

  span {
    color: white;
    display: inline-block;
    position: relative;
    height: 1em;
  }

  span:before {
    content: '';
    position: absolute;
    top: .2em;
    right: 0;
    bottom: .1em;
    left: 0;
    background-color: black;
    z-index: -1;
  }

  span.short:before {
    top: .4em;
  }
于 2012-08-06T11:35:14.777 に答える