テキストの上に反応しやすいimgが必要です。 Iveはいくつかの異なる方法で試してみました。私はそれを反応的にしようとすると、何かの絡み合いを持ってそこに着いたので、誰かが簡単な解決策を持っていれば感謝します。コンテナ内の背景画像上のテキスト
コードスニペットのデモ：
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<div class="container">
<h1>Header</h1>
</div>
</div>absoluteへpositionまたはfixed
{
display: table;
position: relative;
width: 100%;
height: auto;
}
：
.img-fluid{
max-width:100%;
height:auto;
opacity:0.4;
position: absolute;
}
あなたはこれを試すことができますが、ここでのコードの概念を使用した画像のための
<html>
<head>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Image Text within container</h2>
<div class="container">
<img src="abc.jpg" alt="abc" style="width:100%;">
<div class="centered">Centered</div>
</div>
</body>
完璧にもありがとうございます。私はテキストを反応させるクラスを見つけるように思えます。ブートストラップで応答するテキストを作成するためにメディアクエリを使用する必要がありますか？ – born2gamble
あなたはメディアクエリーを試すことができます。それは間違いなくあなたに出力を与えます – Rutvij07
ですコンセプト
{
display: table-cell;
verticl-align: middle;
position: absolute;
}
画像のテキストを上または下または左または右に調整する クラスimg-responsiveを使用すると、すべてのビューで画像の幅と高さが変更されません。
'vertical-align'に' verticl-align'を変更し、 '{'の前に 'img'または' img p'を設定してください。 –
あなたの質問を解決した回答を受け入れたものとしてマークしてください。 –
HTML:
<div class="banner">
<img src="images/star.png" class="img-responsive" width="150" height="150" alt="star">
<h2>This is a Star</h2>
</div>
CSS:
.banner img{position:relative; width:100%; height:auto;}
.banner h2{[psition:absolute; left:50%; top:50%; font-size:30px;
line-height:30px;}
あなたは、ビューポートのサイズに関しては、テキストが応答するために（あなたの必要性に値を中心に微調整）font-size: calc(2vw + 2vh + 2vmin)を利用することができます:)
.container {
position: relative;
}
.container h1 {
position: absolute;
top: 0;
left: 20px;
font-size: calc(2vw + 2vh + 2vmin);
}
.img-fluid {
max-width: 100%;
height: auto;
opacity: 0.4;
}<div class="container">
<img src="https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg?w=620" class="img-fluid">
<h1>Header</h1>
</div>
あなたはこのことを意味ですか？ https://jsfiddle.net/svqtk4rz/ –
はい、ありがとうございます。テキストの応答もメディアクエリを使用する必要がありますか？ – born2gamble
解決策を投稿しました。 –