Question

我想要这篇文章的效果：http://css-tricks.com/text-blocks-over-image/

但是我想知道在用CSS而不是HTML定义图像时如何做到这一点。

如果我创建一个比前一行长的新行，它会为两行创建一个背景颜色块，其长度与新行相同。

实现此效果的正确方法是什么（不用HTML设置图像）？

===其他信息===

这是我之前尝试的......

HTML：

<div class="img-main-wide">
    <span class="img-text-green">
            "be bold, and venture to be wise."<br />"Begin, be bold, and venture to be wise." 
    </span>
</div>

CSS：

.img-main-wide{
    background-image: url(../images/Pyramids-Egypt.jpg);
    max-width: 100%;
    width: 100%;
    height: 80%;
    background-size: cover;
    position: relative;
}

.img-text-green{
        position: absolute;
        margin-left: 1em;
        top: 10em;
        left: 0;
        color: white;
        padding-right: .5em;
        padding-left: .5em;
        background-color: rgba(51,102,0,0.8);
        font-size: 36px;
        font-style: oblique;

}

Answer 1

您可以这样使用：

div{
    position: relative;
    background-image: url("your-image-url") no-repeat;
    /*define width and height also*/

}
.textblock{
    position: absolute;
    bottom: 20px;
    left: 20px;
}

Answer 2

当您将position: absolute设置为span时，您隐式将display: block设置为span。所以绝对定位的span不再像文本选择那样，而是表现得像一个实心矩形。

要解决此问题，您可以使用两个嵌套<div class="img-main-wide"> <span class="img-text-green"> <span> "be bold, and venture to be wise."<br />"Begin, be bold, and venture to be wise." </span> </span> </div>：外部用于定位，内部用于文本格式。 E.g：

HTML：

/* .img-main-wide code is not changed */

.img-text-green {
    position: absolute;
    margin-left: 1em;
    top: 10em;
    left: 0;
}
    .img-text-green > span {
        color: white;
        padding-right: .5em;
        padding-left: .5em;
        background-color: rgba(51,102,0,0.8);
        font-size: 36px;
        font-style: oblique;
    }

CSS：

position: absolute

Fiddle

另一种选择就是不使用{{1}}：fiddle

如何使用CSS在图像上创建文本块

2 个答案: