Question

我试图获得一个漂亮的页内菜单，其中包含一些小图像和标题。这些块可以正常运行，但不是文本覆盖。

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

这是我想要的，但在叠加层中有文字（文字＆＃39;占位符＆＃39;现在是）： Screenshot

我尝试了绝对和相对的位置，但似乎无法让它正常工作。谁有我的解决方案，或者能指出我正确的方向？

Answer 1

看看这个fiddle，看看它是不是你想要的。文本覆盖了图片的文本，但您可以以任何方式更改图片。

我简化了一下你的HTML。你必须把剩下的其余部分丢掉。

但主要的变化是表格布局和HTML中删除的图像并将其添加到CSS上。这是小提琴的样本

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

Answer 2

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

我建议你这样做：

1个区块的HTML代码：

<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 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覆盖图像顶部的文本

3 个答案: