画像上でテキストを移動する

タイトルのテキストを画像上に移動したい。画像の下マージンを-50％に変更すると助けになりましたが、テキストは画面のサイズに応じて大きく移動します。画像上でテキストを移動する

.banner{ 
 
    height: auto; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    z-index: 1; 
 
    text-align: right; 
 
    color: white; 
 
    margin: none; 
 
    bottom margin: none; 
 
} 
 

 
.title h1{ 
 
    color: red; 
 
    width: 100%; 
 
    height:100%; 
 
    margin: auto; 
 
    z-index: 1; 
 
    text-align: center; 
 
    text-shadow: black; 
 
    float:left; 
 
} 
 

 
.title p{ 
 
    color: red; 
 
    text-align: center; 
 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Joe's Garage</title> 
 
     <link rel="stylesheet" type="text/css" href="Garage CSS"> 
 
    </head> 
 
    <body> 
 
     <div class="banner"> 
 
      <img src="https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w"> 
 
     </div> 
 
     <div class="title"> 
 
      <h1>JOE'S GARAGE</h1> 
 
      <p>We Take the Worry Out of Car Trouble by Delivering Accurate Repairs at an Honest Price</p> 
 
     </div> 
 
    </body> 
 
</html>

出典

2017-07-10 Ryan

あなたは画像の真ん中にタイトルをしたいですか？ [flexbox]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）でこれを簡単に行うことができます。 –

はい私はそうです！私は今、それを試しましたが、運はありません。 – Ryan

.banner{ 
 
    height: auto; 
 
    position: absolute; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    z-index: 1; 
 
    text-align: right; 
 
    color: white; 
 
    margin: none; 
 
    bottom margin: none; 
 
} 
 

 
.title h1{ 
 
    position: absolute; 
 
    color: red; 
 
    width: 100%; 
 
    height:100%; 
 
    margin: auto; 
 
    z-index: 1; 
 
    text-align: center; 
 
    text-shadow: black; 
 
    float:left; 
 
} 
 

 
.title p{ 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 50px; 
 
    color: red; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Joe's Garage</title> 
 
     <link rel="stylesheet" type="text/css" href="Garage CSS"> 
 
    </head> 
 
    <body> 
 
     <div class="banner"> 
 
      <img src="https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w"> 
 
     </div> 
 
     <div class="title"> 
 
      <h1>JOE'S GARAGE</h1> 
 
      <p>We Take the Worry Out of Car Trouble by Delivering Accurate Repairs at an Honest Price</p> 
 
     </div> 
 
    </body> 
 
</html>

あなたはポジションを追加することができます。絶対。テキストをイメージの上に置きます。

.banner{ 
    height: auto; 
    position: absolute; 
    width: 100%; 
    max-width: 1200px; 
    z-index: 1; 
    text-align: right; 
    color: white; 
    margin: none; 
    bottom margin: none; 
}

出典

2017-07-10 23:47:16 ethankhoa

あなたはdivの中の画像の上にテキストを持つようにしたい場合は、私は解決策を持っている:)

あなたは、いくつかのフレックスガイドを（それはCSSのために非常にうれしいです）を持つことができます。

フレックスガイドhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/

方法： Iは.title and .textのコンテナとして.banner divを使用しています。

.banner .content定義margin（あなたがタイトルを入れたい場合は、...底に/ ...左）

html, body { 
 
    min-height: 100% !important; 
 
    height: 100%; 
 
} 
 

 
* { 
 
    box-sizing:border-box; 
 
} 
 

 
body { 
 
    margin:0; 
 
    height:100%; 
 
} 
 

 
.banner { 
 
    background: url(https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w) no-repeat center; 
 
    background-size:cover !important; 
 
    width:100%; 
 
    height:100%; 
 
    display:flex; 
 
} 
 

 
.banner .content { 
 
    margin:5px 0 0 0; 
 
    /** or margin auto if you want to centered the content, margin auto 0 0 0 if you want to align on the bottom...**/ 
 
} 
 

 
.banner .title { 
 
    font-weight:600; 
 
    font-size:1.5em; 
 
    margin:0 0 5px 0; 
 
} 
 

 
.banner .title, .banner .text { 
 
    color:red; 
 
}

<div class="banner"> 
 
    <div class="content"> 
 
    <div class="title">My title</div> 
 
    <div class="text">My text</div> 
 
    </div> 
 
</div>

出典

2017-07-11 00:23:43 Nepplot

が、私は間違いなくbackground-imageのために使用しますこの。結局のところ、これはそれのためのものです。

.banner { 
    background-image: url('https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w'); 
    background-size: cover; // or 'contain', depending on what you want. 
}

は、最良の結果を得るために、（テキストが水平垂直方向の中央だけでなく、したいと仮定して）いくつかのheight制御、background-positionスタイル、お好みの垂直配向のトリックを追加し、.banner容器内のオーバーレイマークアップを置きます。

body { 
 
    margin: 0; 
 
} 
 

 
.banner { 
 
    align-items: center; 
 
    background: url('https://static1.squarespace.com/static/562837d1e4b0c53c5afbc078/t/5863246febbd1ab7ab5125b6/1482892406200/slide_405344_5057908_free.jpg?format=1500w') center center; 
 
    background-size: cover; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: auto; 
 
    max-width: 1200px; 
 
    min-height: 100vh; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.title h1, .title p { 
 
    color: red; 
 
    line-height: 1.5; 
 
    margin: 0; 
 
    text-shadow: 1px 1px 4px black; 
 
}

<div class="banner"> 
 
    <div class="title"> 
 
    <h1>JOE'S GARAGE</h1> 
 
    <p>We Take the Worry Out of Car Trouble by Delivering Accurate Repairs at an Honest Price</p> 
 
    </div> 
 
</div>

出典

2017-07-11 00:23:52 bowheart

ありがとうございます！私は当初、それをバックグラウンドイメージとして持っていましたが、divの高さ以上を表示し、それを中央に保持する方法はわかりませんでした。 – Ryan

画像上でテキストを移動する

答えて

関連する問題