Question

我不想只在文字中放置文字。我希望文本从图像的底部中心开始，并且能够在图像外部向右运行。

考虑上面的stackoverflow站点图像（如果文本实际上不是图像的一部分）。

考虑是否橙色棒继续直到它超过'K'

这是一个粗略的例子（＃代表图像）。

#################
#################
#####
#####   TEXT GOES HERE 
#####

我希望我能够充分解释。

列出我尝试过的所有内容是不切实际的，因为我没有跟踪我尝试过的所有事情（sfd）。

<td valign="left">
    <div style="float:left;">
        <img src="image.png" />
    </div>
    <div style="float:left;vertical-align:bottom; margin-right:100px">
        <asp:Label ID="Label1" runat="server" style="font-size:1.5em;" >TEXT TEXT TEXT TEXT</asp:Label>
    </div>
</td>

Answer 1

我不是100％想要的解决方案，但我想它是这样的？ http://jsfiddle.net/ujL4pwx9/1/

HTML

<div class="foo">
    <img src= "http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg"/>
    <p> this is my text and it goes outside of the image when needed </p>
</div>

CSS

div.foo{
    position:relative;
    width: 300px;
}

img{
    width:300px;
}

p{
    position:absolute;
    width:100%;
    right:-50%;
    bottom:0;
    margin:0;
    background:white;
    border:solid 1px black;
}

使div包含img和text相对，然后你可以使文本绝对并决定边缘将到达的位置。如上面的jsfiddle所示。

这是你的意思吗？

但我个人并不是使用img而是使用背景图片

http://jsfiddle.net/9ka1fq2j/3/

HTML

<div class="foo">
    <p> this is my text and it goes outside of the image when needed </p>
</div>

CSS

div.foo{
    position:relative;
    width: 300px;
    height:300px;
    background-image:url(http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg);
    background-size:cover;
}

p{
    position:absolute;
    width:100%;
    right:-50%;
    bottom:0;
    margin:0;
    background:white;
    border:solid 1px black;
}

Answer 2

当图像的大小已知时，这相对简单：只给文本一个背景颜色（否则默认是透明的），左边距是图像宽度的一半。

span {
    background: white;
    margin-left: -70px;
}

<img src="http://lorempixel.com/140/140/city" />
<span>Long descriptive caption</span>

就是这样。出于美观的目的，您可以将其包装在div中，以便它可以单独放置。其次，上述解决方案将图像的底部与文本的基线而不是文本的底部对齐。如果你想同时修复它们，那么使用这个稍微更多的复杂解决方案：

div {
    float: left;
}
img {
    vertical-align: bottom;
}
span {
    background: white;
    margin-left: -70px;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo tristique ante in rhoncus. Vivamus auctor nec massa elementum mattis. Nunc tempor metus quam, quis varius nibh posuere eu. Suspendisse vitae iaculis ex, id lacinia nunc.</p>
<div>
    <img src="http://lorempixel.com/140/140/city" />
    <span>Long descriptive caption</span>
</div>
<p>Sed gravida congue ligula. Cras dignissim varius aliquet. Morbi semper nulla eget mauris feugiat accumsan. Aenean iaculis nisl a erat interdum bibendum. Nullam eu urna tempus, efficitur urna sit amet, vestibulum lorem. Duis tincidunt, nunc id semper maximus, ante lorem suscipit orci, nec laoreet libero dui in odio. Mauris in mi at dui aliquam vestibulum id non metus. Sed et enim ut metus tristique tempus. In tempus purus a eros imperdiet porttitor. Fusce faucibus, nisl at vestibulum suscipit, tellus magna tincidunt ante, at ultrices nulla libero non quam.</p>
<p>Ut orci nunc, cursus eget quam id, malesuada consequat odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ullamcorper nunc. Integer luctus faucibus augue, ac fermentum mi bibendum sed. Donec ultrices pulvinar tellus. Praesent mollis euismod erat eu semper. Pellentesque pretium interdum nibh sed aliquet. Etiam vehicula aliquam ligula id imperdiet. Cras sodales purus leo, sed scelerisque enim porttitor ac. Aenean id luctus quam. Nullam elementum arcu quis elit malesuada dapibus. Maecenas leo nisi, maximus dignissim enim sed, lacinia tempor est. Maecenas eget cursus ligula.</p>

Answer 3

z-index css属性在这种情况下也是一个很好的工具，只需使用边距值居中。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 4

有一个z-index属性，你应该把它增加1，这对你有帮助。您可以制作一些方法来增加/减少它，以防您想隐藏它然后让它再次显示出来。

有关here和here中的z-index的更多信息。

如何重叠图像上的文本？

4 个答案: