Question

我有以下HTML，但似乎无法将文字放到图像上。我希望将h1，h2和ul li标签放在图像上。

我知道我可以把图像放在CSS中，我只需要知道如何编辑CSS（或HTML？），这样文本就可以放在图像上了。

<header>
<img src="Images/Damask.png" width="100%" border="0" height="200" class="header">
    <a href="index.html" id= "logo">![enter image description here][1]
        <h1>J Barnes Events</h1>
        <h2>Indianapolis's Finest<h2>   
    </a>
    <nav>
        <ul>
            <li><a href="index.html" class="selected">Events</a></li>
            <li><a href="about.html">Blog</a></li>
            <li><a href="contact.html">About</a></li>
        </ul>
    </nav>
</header>

Answer 1

你可以使用相对位置img和绝对位置来放置的子元素。试试这样 -

<header>
<style type="text/css">
.header{
position:relative;
}
a{
position:absolute;
left:0;
top:0;
}
.nav{
position:absolute;
left:0;
top:100;
}
</style>
</header>
<img src="Images/Damask.png" width="100%" border="0" height="200" class="header"/>
    <a href="index.html" id= "logo">![enter image description here][1]
        <h1>J Barnes Events</h1>
        <h2>Indianapolis's Finest</h2>   
    </a>
    <nav class="nav">
        <ul>
            <li><a href="index.html" class="selected">Events</a></li>
            <li><a href="about.html">Blog</a></li>
            <li><a href="contact.html">About</a></li>
        </ul>
    </nav>

文本放在标题图像上

1 个答案: