如何在Dreamweaver中將圖像疊加到圖像頂部？

-1

我該怎麼做，並獲取文本覆蓋在Dreamweaver中的圖像頂部？像下面的鏈接圖像： http://i.stack.imgur.com/8GvkW.png 如何在Dreamweaver中將圖像疊加到圖像頂部？

這裏是我的代碼如下所示：

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; 
    }

來源

2016-03-21 navyhouses

你會想給...將你的圖像作爲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; 
}

來源

2016-03-21 01:25:54 dave

試過了，不幸的是它沒有工作。當我在瀏覽器中查看它時，沒有圖像或文字。 – navyhouses

你的CSS文件和你的html文件在同一個文件夾中嗎？路徑是相對的，所以如果你有一個css文件夾，url可能需要是''../ images/headerimage.jpg'' – dave

糾正了這個問題！非常感謝您的幫助。 – navyhouses

如何在Dreamweaver中將圖像疊加到圖像頂部？

回答

相關問題