2016-10-05 5 views
2

私は、次の使用角度材料(つまり、画像の上にダイナミックテキストを追加し、言うことです)を再生しようとしています: text over image角度素材 - 要素(MD-カード内)の画像にオーバーレイ

を私はしたいと思います便利なので、MDカードを使用してください。

私の問題は、イメージ上にテキストオーバーレイを作成できないということです。テキストは常にイメージの前後にあります。

CSSの位置で再生していますか?

ありがとうございます!

+0

あなたはまったくCSSをしたくないですか?これを実現するCSSの行はほとんどありません。 – LearnForever

答えて

1

ラッパーを使用できます。このような何か:

HTML:

​​

CSS:

.md-card-wrapper { 
    position: relative; 
    width: 40%; 
    span { 
     position: absolute; 
     top: 20%; 
     right: 20%; 
     color: white; 
     font-size: 34px; 
    } 
} 

それとも、ここに私の例で遊ぶことができます:

+0

彼はCSSを避けようとしていると思います。 –

+0

確かに、私はCSSを避け、できるだけ多くの角度材料固有のオプション/機能を使用しようとしていました。 たとえば、ラッパーオプションが機能します(途中でありがとうございます)が、ブラウザウィンドウのサイズを変更すると、テキストと位置はスケールされませんが、アンギュラマテリアルはネイティブにこれらの問題を扱います。 –

+0

テキストオーバーレイ用のAngular Materialソリューションは組み込まれていませんが、Material仕様に含まれています。これは、仕様に従って自分でそれを行うことはまったく問題ありません。 – LuxDie

関連する問題