2017-02-15 49 views
0

text comes over this stack image any idea how to do it文本在圖像的CSS

div有3-4行,圖像和分頁上左側底部上的文本。像這樣的東西。

圖像垂直對齊:中間, 文本垂直對齊:中間,在此背景下疊加圖像的左下方 小分頁文本

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

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

請分享你的HTML代碼 –

+0

使用**的z-index:-1 **圖像 –

+0

將彎曲是一種選擇? http://codepen.io/gc-nomade/pen/KaEywJ –

回答

0

因爲它看起來像你需要什麼,你可以用彎曲,空白和邊距:

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/

0

我想你忘了改色#000 DIV。或者它可能的z-index的問題

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

    } 
0

你應該與容器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>