イメージの上にテキストを追加して並べて配置します

2つのイメージの上にテキストを追加して並べて配置します。イメージの上にテキストを追加して並べて配置します

#main { 
 
    position: fixed; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
} 
 
#front-header { 
 
    font-family: "Linux Biolinum"; 
 
    font-size: 42pt; 
 
    line-height: 0pt; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 
#PI { 
 
    font-family: "Linux Libertine"; 
 
    font-size: 22pt; 
 
    line-height: 0pt; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    text-align: center; 
 
    color: red; 
 
} 
 
#copyright { 
 
    font-family: "Latin Modern Mono"; 
 
    font-size: 10pt; 
 
    line-height: 0pt; 
 
    font-weight: normal; 
 
    text-align: center; 
 
} 
 
#meerkat { 
 
    width: 18cm; 
 
    height: 14cm; 
 
} 
 
#salt { 
 
    width: 17.5cm; 
 
    height: 14cm; 
 
} 
 
#figu { 
 
    display: inline-block; 
 
    float: left; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    height: 30px; 
 
} 
 
#container { 
 
    height: 17.5cm; 
 
    width: 14cm; 
 
    float: left; 
 
    position: relative; 
 
} 
 
#images { 
 
    position: relative; 
 
    float: left; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#text { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 24px; 
 
    font-weight: bold; 
 
    left: 50px; 
 
    top: 50px; 
 
} 
 
.image { 
 
    position: relative; 
 
    float: left; 
 
    /* optional */ 
 
} 
 
.image .text { 
 
    position: absolute; 
 
    top: 10px; 
 
    /* in conjunction with left property, decides the text  position */ 
 
    left: 10px; 
 
    width: 300px; 
 
    /* optional, though better have one */ 
 
}

<body style="   height: 723.09px;"> 
 
    <p id="front-header">Learning HTML</p> 
 
    <p id="PI">Author:TH</p> 
 
    <p> 
 
    <br> 
 
    </p> 
 
    <p> 
 
    <br> 
 
    </p> 
 
    <div> 
 
    <img title="MeerKAT" alt="MeerKAT" id="meerkat" src="meerkat.jpg" border="0">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 
    <div style="background-image:url('SALT-1.jpg');background-repeat:no-repeat;height:20cm;width:20cm;"> 
 
     <h1 style="color:white;">Hello World!.</h1> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <div> 
 
    <p id="copyright">Created Today</p> 
 
    </div> 
 
</body>

は、私が「meerkat.jpg」&「塩-1.JPG」という名前の人物の上にテキストを追加したい：私は、以下の方法でこれを実行しようとしました。その後、私はそれらを並べて配置したい。

お勧めします。ありがとう。

出典

2017-02-02 Tanvir

こんにちはTanvir、スタックオーバーフローへようこそ。コードをコードスニペットに変換できますか？ありがとう！ https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – Roy

ありがとう@Roy私はコードをコードスニペットに変換しました。 – Tanvir

これを達成するにはいくつかの解決策がありますが、これは私の取り組みです。 MDNで説明されているdisplay: flex;のプロパティを使用します。あなたの質問でコードを調べると、私はあなたがCSSで多くの経験を持っていないことを期待しているので、私はすべてのコードを取り除き、きれいな例を作りました。

画像をbackground-imageに設定すると、画像の上にテキストを追加するために、<hX>要素を追加することができます。

Iが提供される別の解決策は、2行目で、インライン画像と共にposition: relative;とposition: absolute;を利用します。コンテナをrelativeに設定し、その内部にあるテキストをabsoluteに変更すると、内の divにのみ影響します。

でもfloatを使用できますが、レイアウトに問題が生じる可能性があります。

.container { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    width: 100%; 
 
} 
 
.image-wrapper { 
 
    background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
 
    flex: 1; 
 
    width: 50%; 
 
    height: 300px; 
 
    border: 2px solid red; 
 
    /* Only to show that there are two images */ 
 
} 
 
.image-wrapper h1 { 
 
    color: #fff; 
 
    margin: 0; 
 
} 
 
.container-position { 
 
    margin-top: 100px; 
 
} 
 
.image-wrapper-position { 
 
    position: relative; 
 
    flex: 1; 
 
    width: 50%; 
 
} 
 
.image-wrapper-position h1 { 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 20px; 
 
    color: #fff; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="container"> 
 

 
    <div class="image-wrapper"> 
 
    <h1>This is text</h1> 
 
    </div> 
 
    <div class="image-wrapper"> 
 
    <h1>This is text on top of image</h1> 
 
    </div> 
 

 
</div> 
 

 
<div class="container container-position"> 
 

 
    <div class="image-wrapper-position"> 
 
    <img src="http://i.imgur.com/AzeiaRY.jpg" /> 
 
    <h1>Hello world</h1> 
 
    </div> 
 
    <div class="image-wrapper-position"> 
 
    <img src="http://i.imgur.com/AzeiaRY.jpg" /> 
 
    <h1>Hello world</h1> 
 
    </div> 
 

 
</div>

出典

2017-02-02 20:24:29 Roy

ありがとうございます。はい、私はCSSとHTMLで作業する方法を学んでいます。 2つの画像が異なる場合はどうなりますか？ 2番目の画像の上にのみテキストを表示したいとします。両方とも並んでいますか？ – Tanvir

画像を変更すると、画像が伸びます。それを中心にしたりフィットさせる方法は？ 'background-position = center center;を使用しますか？ – Tanvir

私は上記のすべての問題を解決することができます。どうもありがとう。 – Tanvir

-1

あなたのウェブサイトのガイドとして次のコードを使用してください。あなたに合わせて幅と高さを<img>に変更してください。

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    .floating-box { 
    display: inline-block; 
     float: left; 
     width: 500; 
     height: 500; 
     margin: 50px; 
     border: 1px solid 0; 
    } 

    </style> 
    </head> 
    <body> 

    <h2>Text appearing above images</h2> 

    <div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;"> 
    </div> 
    <div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;"> 
    </div> 


    </body> 
    </html>

出典

2017-02-02 20:17:31 CoderGirl94

ありがとうございます。しかし、これは画像の上にテキストを置くわけではありません。 – Tanvir

オハイオ州、私の悪い。私はその質問を誤解しました！ – CoderGirl94

イメージの上にテキストを追加して並べて配置します

答えて

関連する問題