0

我想要这篇文章的效果： 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;

}
4

2 回答 2

1

你可以这样使用：

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

}
.textblock{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
于 2013-07-29T05:02:13.147 回答
1

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

为了解决这个问题，您可以使用两个嵌套span的 s：外层用于定位，内层用于文本格式化。例如：

HTML：

<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>

CSS：

/* .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;
    }

小提琴

另一种选择就是不使用position: absolute：fiddle

于 2013-07-29T05:41:00.693 回答