テキスト上のテキスト

Question

text comes over this stack image any idea how to do it

divには、3〜4行のテキストがあり、左側のボトムに画像とページ番号があります。このようなもの。垂直整列

画像：途中、垂直整列 テキスト：途中、このような背景スタック画像

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
    } 

div { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    } 

Answer 1

それはあなたが必要なもののように見えるので、あなたはフレックス、パディングとマージンを使用することがあります。

div { 
 
    background:url(https://i.stack.imgur.com/EinaJ.png) top center; 
 
    width:620px; 
 
    margin:auto; 
 
    padding:40px 40px 30px; 
 
    height:790px; 
 
    position:relative; 
 
    display:flex; 
 
    flex-flow:column; 
 
    justify-content:center; 
 
} 
 
img, p, nav { 
 
    padding:5px; 
 
    margin:0; 
 
    /* see me */ 
 
    background:pink 
 
} 
 
img { 
 
    margin:auto auto 0; 
 
} 
 
nav { 
 
    bottom:30px; 
 
    right:45px; 
 
    margin:auto 0 0; 
 
    border-radius:0 0 0.25em 0.25em ; 
 
    /* see me */ 
 
    background:rgba(0,0,0,0.2); 
 
    text-align:center; 
 
    word-spacing:0.5em;/* better use margin on links, ... */ 
 
} 
 
body { 
 
    background:#777; 
 
}

<div> 
 
    <img src="http://lorempixel.com/200/150"/> 
 
    <p>here is</p> 
 
    <p>some line</p> 
 
    <p>of</p> 
 
    <p>text</p> 
 
    <nav>navigation : <a href> link</a> <a href> link</a> <a href> link</a></nav> 
 
</div>

役に立つことができ、中でもressource：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

の左下側の 小さな改ページのテキストは、私はあなたの色の＃000を変更するのを忘れたと思いますdiv。またはそれがz屈折率

div { 
    color:Black; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    z-index:222; 

    } 

Answer 3

の問題あなたは「位置：相対;」でコンテナDIVをしなければならないことがあり、このDIV内の画像が含まれ、また「位置：絶対;」でテキストを含みます。例えば

：

#container { 
    height: 100px; 
    width: 100px; 
    position: relative; 
} 

#container img { 
    display: block; 
    width: 100px; 
    height: 100px; 
} 

#container span { 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

とあなたのHTML：

<div id="container"> 
    <img src="" alt="" /> 
    <span>Hello World</span> 
</div>