Karanlik7 Karanlik7
Merhaba Ziyaretçi Blog Siteme Hoşgeldin ; Bugün

Karanlik7 | Gecenin Karanlığı Hissettirir Yalnızlığı - Karanlıklar ülkesinden karanlık yazılar.. ..

css resim uzerine yazi

Css Resim Üzerinde Yazı Göstermek

Merhaba arkadaşlar bu makaleye girdiğinize göre ya bu konuyu araştırıyordunuz ya da görüp merak edip girdiniz. Evet bu makalede resim üzerine css ile yazı yazma örneğini göstereceğim.

Dreamweaverda boş bir html sayfası açalım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>


Şimdi gerekli css kolarını head tagı içinde bir alana yazalım.

<style>
#dis{    float:left;     position:relative; }
#ic{  position:absolute;    top:0px;    left:0px;    width:100%;    background-color:black;    font-family: 'tahoma';
    font-size:15px;    color:white;    opacity:0.6;     filter:alpha(opacity=60);}
</style>

Css kodlarını girdikten sonra div kutularının bulunduğu alttaki kodu body tagı içine girelim.

    <div id="dis">
        <img src='Resminizin yolunu burada belirtin.' />
        <div id="ic">
            <p style="padding:10px; margin:0px;">Hakkı Cengiz Buraya istediğiniz bir metin yazın.</p>
        </div>
    </div>

Şimdi tek yapmanız gereken sayfanızı kaydedip, sayfayı çalıştırmak.

Notlar:
opacity:0.6; kodu resmin üzreindeki yazının ve bgsinin saydamlığını ayarlar. Ancak muhtemel olarak ie de sorunlar çıkartacaktır. Bu yüzden filter:alpha(opacity=60);  kodunu ekliyoruz.


Bugüne Kadar 64138 ziyaretçi (166073 klik) karanlik7'ye uğradı!

Yorumlar Sözler...

karanlik7.tr.gg
Kategoriler
Üye Girişi
Kullanıcı Adı
:
Şifre
:
Şifremi Unuttum?
Sponsor Reklamlar
ANKARA'da 5 Günlük Hava Tahmini
Sponsor
Tavsiye Bağlantılar
  • Link bolumu

  • Anket
    Sitemizi nasıl buldunuz?
     
    Son Yorumlar
    Ana Sayfa
    Yukarı Çık

    Copyright © 2014 | XHTML | CSS | design by k7


    => Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=