使用 CSS 在图片上叠加文字

Question

我正在尝试获得一个漂亮的 in-page 菜单，其中包含一些小图像和这些图像块上的标题。这些块可以正常工作，但文本叠加层不行。

我的HTML:

<!DOCTYPE html>
<head>
    <title>Blocks example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=980" />
</head>
<body>
<div id="wrapper">
    <header>
        <img src="img/header.jpg" alt="Header Blocks">
        <span><a href="#" title="To homepage"><h1>Blocks example</h1></a></span>
    </header>
    <main>
        <article id='blokken'>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 1"><p>placeholder 1</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 2"><p>placeholder 2</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 3"><p>placeholder 3</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 4"><p>placeholder 4</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 5"><p>placeholder 5</p></a>
            <a href='#'><img src="img/placeholder.jpg" alt="placeholder 6"><p>placeholder 6</p></a>
        </article>
    </main>
</div>
    <footer>
    </footer>
</body>

还有我的CSS：

body {
    margin: 0;
    }

#wrapper{
    width: 980px;
    margin: 0 auto;
    padding-bottom: 50px;
}

/* Header */
header > img{
    }
header > span{
    position: relative;
    display: inline;
    top: 200px;
    left: 150;
    width: 200px;
    height: 100px;
    }
header > a{
    /*opacity: 0;
    filter: alpha(opacity=0); */
    }

/* Blokken */
    #blokken{
        padding-left: 100px;
    }
    #blokken img{
        margin: 25px 25px;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
        }
    #blokken img:hover{
        -webkit-filter: brightness(50%);
        filter: brightness(50%);
        }

And here a link to a version online

这就是我想要得到的，但是在叠加层中有文本（文本 'placeholder' 现在所在的位置）： Screenshot

我尝试了很多绝对和相对位置，但似乎无法使其正常工作。谁有适合我的解决方案，或者可以指出正确的方向？

Answer 1

通过将图像用作背景图像并使用跨度将文本定位在锚点内，可以更轻松地完成此操作。

我建议你这样做：

HTML 1 个块的代码：

<div id="wrapper">
    <header>
    </header>
    <main>
        <article id='blokken'>
            <a href='#'><span>placeholder 1</span></a>
        </article>
    </main>
</div>

CSS:

#blokken a {
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#blokken a {
    background-image: url(http://www.warwickrowers.org/wp-content/uploads/2014/10/default-placeholder-200x200.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    display: block;
    text-align: center;
}
#blokken span {
    display: inline-block;
    margin-top: 43%;
    color: red;
    font-weight: bold;
    font-size: 24px;
}
#blokken a:hover {
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}

你可以在这里看到它是如何工作的：JSFIDDLE

Answer 2

看看这个 fiddle 看看它是否是您想要的。文字与图片的文字重叠，但您可以任意更改图片。

我稍微简化了你的 HTML。你必须把剩下的放在后面。

但主要变化是 table 布局和从 HTML 中删除的图像并将其添加到 CSS。这是 fiddle

的示例

<table id='blokken'>
    <tr>
        <td>
            <a href='#'><p>placeholder 1</p></a>
        </td>
    </tr>
</table>

Answer 3

所以我从两个答案中提取了一些解决方案并得到了这个作为我的结果：

<article id='blocks'>
<a href='#first_link' style='background:#ffffff url("img/blocks/first_link.jpg") no-repeat;'><span>First link</span></a>
<a href='#second_link' style='background:#ffffff url("img/blocks/second_link.jpg") no-repeat;'><span>Second link</span></a>
<a href='#third_link' style='background:#ffffff url("img/blocks/third_link.jpg") no-repeat;'><span style='font-size:1em;'>Some very long text</span></a>
<a href='#fourth_link' style='background:#ffffff url("img/blocks/fourth_link.jpg") no-repeat;'><span>Fourth link</span></a>
<a href='#fifth_link' style='background:#ffffff url("img/blocks/fifth_link.jpg") no-repeat;'><span>Fifth link</span></a>
<a href='#sixth_link' style='background:#ffffff url("img/blocks/sixth_link.jpg") no-repeat;'><span>Sixth link</span></a>

    #Blocks{
    padding-left: 100px;
    }
#Blocks a{
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    margin: 25px 25px;
    width: 200px;
    height: 200px;
    display: inline-block;
    text-align: center;
    }
#Blocks span{
    display: inline-block;
    line-height: 200px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    text-shadow: -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    }
#Blocks a:hover{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    }

通过使用内联 CSS（可以说是用户生成的内容），我为块提供了自己的背景。较长的文本变小了一点，仍在摆弄它，但这又是一个令人担忧的问题。非常感谢大家！

使用 CSS 在图片上叠加文字

Using CSS to overlay text on top of images

html

css

overlay

image

block