文本在图像的CSS

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%; 
    }

来源

2017-02-15 koku19

请分享你的HTML代码 –

使用**的z-index：-1 **图像 –

将弯曲是一种选择？ http://codepen.io/gc-nomade/pen/KaEywJ –

因为它看起来像你需要什么，你可以用弯曲，空白和边距：

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/

来源

2017-02-15 14:46:10

我想你忘了改色＃000 DIV。或者它可能的z-index的问题

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

    }

来源

2017-02-15 12:47:37

你应该与容器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>

来源

2017-02-15 13:21:35 TamirNahum

文本在图像的CSS

回答

相关问题