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{
    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中将图像叠加在图像上？

1 个答案: