在 Dreamweaver 中如何让文本叠加在图像之上？

Question

在 Dreamweaver 中，我将如何着手让文本覆盖在图像之上？喜欢下面的链接图片： http://i.stack.imgur.com/8GvkW.png

我的代码如下所示：

HTML

<body>
<main>
<header>
<img src="images/headerimage.jpg" alt="" height="500" width="1280">
</header>
<h1>Hidden Gems of</h1>
<h2>Canada</h2>
</main>
</body>

CSS

body{
    margin:0;
    }
main{
    width: 1280px;
    margin: 0 auto;
    background-color: #FFF;
    }
header{
    height: 500px;
    background-color: #FF751F;
    margin-top: 23px;
    }
h1{
    font-family: "Ailerons";
    font-size: 83px;
    font-weight:lighter;
    text-shadow: 7px 7px 15px #000;
    color: #FFF;
    float: left;
    margin-top: -300px;
    margin-left: 314px;
    }
h2{
    font-family: "SkolaSans";
    font-size: 44px;
    font-weight:100;
    text-shadow: 7px 7px 10px #000;
    color: #FFF;
    float: left;
    margin-top: -200px;
    margin-left: 536px;
    padding-top: 15px;
    }

Answer 1

您需要将您的图片设置为 CSS 中的背景图片。

首先将您的文字放在 <header> 标签内并删除图片，如下所示：

<header>
    <h1>Hidden Gems of</h1>
    <h2>Canada</h2>
</header>

然后在您的 CSS 中添加 header 图片作为背景：

header{
    width: 1280px;
    height: 500px;
    background:url('images/headerimage.jpg') no-repeat center;
    /* 'no-repeat' stops the image tiling inside its container, and 'center' will position the image in the middle of its containing div */
    margin-top: 23px;
}

在 Dreamweaver 中如何让文本叠加在图像之上？

How do I get text to overlay on top of an image in Dreamweaver?

html

css

image

dreamweaver