HTML

Question

我正在尝试在下面的profilepic.jpg上叠加“文字叠加在这里”。我认为我在做错了CSS。我试图做的只是创建一个名为overlay的新div类，我想如果我只是在imgcontainer类之间嵌入那条线，那就行了。谁能让我知道我在这里做错了什么？

HTML

<div id="timeline">
        <div class="block2x3 block">
            <div class="imgcontainer">
                <img src="profilepic.jpg" />
                <p><div class="overlay">Text Overlay Goes Here</div></p>
            </div>

            <div class="commentcontainer">
                <div class="peoples">
                    <a href="#"><strong class="peoplename">Joe Schmo</strong></a> and <a href="#">42 other people bought this</a>
                    <p>Have commented on your <a href="#">wall post</a></p>
                </div>
            </div>
        </div>

CSS

#timeline div[class*="block2x3"] .imgcontainer  {height:66.6%;}
#timeline div[class*="block2x3"] .commentcontainer  {height: 33.4%;;}
#overlay{
    float: top;
    background: rgba(0,0,0,.7);
}

Answer 1

以下是如何完成这项工作的示例：http://jsfiddle.net/codershop/ddg2ymxm/

从叠加div周围删除段落标记。

<div class="overlay">Text Overlay Goes Here</div>

在css中将#overlay选择器更改为类选择器.overlay。像这样：

.overlay{
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    left: 15px;
    position: absolute;
    top: 15px;
}

Answer 2

float: top;不存在:)您正在寻找position: absolute

在叠加层容器上设置position: absolute，使其位于图像顶部。
在图片容器上设置position: relative以使叠加位置与其相关。
删除高度属性并让内容确定高度。
在图片容器上设置display: inline-block，以便使用图片宽度自动调整大小
让叠加容器width: 100%保持图像的整个宽度。

CSS / HTML / Demo

＆＃13;

* {
    margin: 0;
    padding: 0;
}

#timeline {
    padding: 10px;  
}

.image {
    position: relative; 
    display: inline-block; /* allow width to be determined by the images size */    
}

.block .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%; /* Full width of .image */
    background: rgba(0,0,0,.7);
    color: #FFF;
}

.comment {
    padding: 10px 0 0;  
}

＆＃13;

<div id="timeline">
    <div class="block2x3 block">
        <div class="image">
            <img src="http://www.placehold.it/200" />
            <div class="overlay">Text Overlay Goes Here</div>
        </div>
        <div class="comment">
            <a href="#"><strong class="peoplename">Joe Schmo</strong></a> and <a href="#">42 other people bought this</a>
            <p>Has commented on your <a href="#">wall post</a></p>
        </div>
    </div>
</div>

＆＃13;

在此示例中，如何将文本叠加到图像上？

HTML

CSS

2 个答案: