2016-03-21 18 views
-1

Dreamweaver'da bir görüntünün üstüne nasıl bindirilecek ve metin olarak nasıl yazılır? aşağıda bağlantısı resmin gibi : Burada http://i.stack.imgur.com/8GvkW.pngDreamweaver uygulamasında bir görüntünün üzerine yerleştirilecek metni nasıl alabilirim?

benim kod göründüğünü gibi:

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

cevap

0

Sen isteyeceksiniz s ve görüntünüzü, CSS'nizde arka plan görüntüsü olarak kullanın.

İlk <header> etiketinin içine metin koymak ve böylece gibi resmi kaldırmak:

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

Ardından CSS'nizde arka plan olarak başlık resmini ekleyin:

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

dikkat çalıştı ve ne yazık ki işe yaramadı. Tarayıcımda görüntülediğimde görüntü veya metin yoktu. – navyhouses

+0

Css dosyanız html'nizle aynı klasörde mi? Yol göreceli, bu yüzden bir css klasörünüz varsa, url '' ../images/headerimage.jpg '' olmalıdır. – dave

+0

Sorun düzeltildi! Yardımın için çok teşekkürler. – navyhouses

İlgili konular