12

この質問を他の方法で提起する方法が本当にわかりませんが、画像の上にテキストを読み込もうとしています. 残念ながら、チュートリアルは少し古くなっているため、モバイルのフォント サイズとスパン サイズの両方を動的に変更し、テキストを画像の上の正しい場所に維持する方法を理解できません。

ウィンドウのサイズを変更すると、テキストとボックスのサイズが適切に変更されません (画像からはみ出します)。

私はパーセンテージサイジングや他のテクニックを試しましたが、ほとんど運がありませんでした。背景付きの画像の上にテキストを表示するために使用している CSS を以下に示します。

画像にテキストをオーバーレイするためのベスト プラクティスは何ですか?また、レスポンシブにするにはどうすればよいでしょうか? これは、私が現在デスクトップ ブラウザで使用しようとしているものです。

.herotext span {
  position:     absolute;
  top:          80%;
  font-family:  'museo_slab500';
  font-size:    150%;
  color:        #fff;
  padding-left: 20px;
  width:        40%;
  line-height:  35px;
  background:   rgb(0, 0, 0);
  background:   rgba(0, 0, 0, 0.7);
}

最近、これを適切に処理する方法について誰かアドバイスがありますか? 上で言及した記事は 2009 年のもので、テキストをオーバーレイする最良の方法ではないと思います。

4

1 に答える 1

13

私が行う変更は次のとおりです。

  • ではなくspan使用を配置して、スパンと画像の下部の間に常に特定のマージンを確保します。bottomtop
  • パーセンテージベースを使用しline-heightて、それに比例して変化するようにしますfont-size
  • スパンの右側にパディングを追加して、テキストがスパンの端にぶつからないようにします

更新された CSS:

.herotext span {
    position:    absolute;
    bottom:      20px;
    font-family: 'museo_slab500';
    font-size:   150%;
    color:       #fff;
    padding:     0 20px;
    width:       40%;
    line-height: 150%;
    background:  rgb(0, 0, 0);
    background:  rgba(0, 0, 0, 0.7);
}
于 2013-07-02T01:33:36.653 に答える