النتائج 1 إلى 5 من 5

الموضوع: اريد طريقة صورة بالخلفية وعدم تصغيرها وتكبيرها ,, مثل خلفية جوجل

  1. #1
    عضو فعال
    تاريخ التسجيل
    May 2006
    المشاركات
    1,178

    Thumbs up اريد طريقة صورة بالخلفية وعدم تصغيرها وتكبيرها ,, مثل خلفية جوجل



    السلام عليكم اعضاء سوالف الكرام

    في موقع جوجل تم اضافة خاصية جديدة منذ فترة وهي اضافة صورة الخلفية في الصفحة الرئيسية

    لاحظت فيها ميزة جيدة جداً

    الصورة التي يتم اضافتها عند اي حجم عرض تصفح ( 1024 و 800 و 1280 ) بتظهر الصورة بنفس الطول والعرض والمحتوى هو اللي بيتم تصغيرة وتكبيرة

    وهذا مثال للـ 3 طرق عرض

    صورة بعرض 800

    http://filaty.com/i/1006/11071/800.jpg

    صورة بعرض 1024

    http://filaty.com/i/1006/59944/1024.jpg

    صورة بعرض 1280

    http://filaty.com/i/1006/65526/1280.jpg

    لاحظوا الصورة في الخلفية ظهرت بنفس المكان والمحتوى فقط هو اللي تم تصغيرة وتكبيرة

    حاولت حفظ صفحة جوجل واستخلاص الكود ولكن بعد الحفظ والعرض , ظهرت الصورة بشكل مختلف في كل تصفح عرض

    هل من افكار ؟!!

    وشكراً جزيلاً





    __________________
    مبادرة حدث متصفحك - شاركوا بها في مواقعكم
    You have to know, If you pay peanuts you get monkeys


  2. #2
    عضو نشيط
    تاريخ التسجيل
    May 2010
    المشاركات
    76


    السلام عليكم

    يتم عمل مثل هذه الفكره عن طريق استخدام

    position relative

    عن طريق سى اس اس

    ويتم ذلك بوضع الصوره عاديه داخل العنصر

    مثلا

    <div>
    <img src="link.jpg" width="100%" height="100%" />
    </div>

    ويتم وضع ديف اخر بعد الصوره ليصبح هكذا


    <div>
    <img src="link.jpg" width="100%" height="100%" />
    <div class='over'>
    </div>
    </div>

    ويتم اعطاء كلاس باسم

    over

    خصائصه

    class {
    position:relative;
    top:-100%;
    }

    حتى يكون محتوى الصفحه كاملة هكذا

    <!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>
    <style type="text/css">
    <!--
    .over {
    position:relative;
    top:-100%;
    width:100%;
    height:100%;
    }
    -->
    </style>
    </head>

    <body>
    <div >
    <img src="link.jpg" width="100%" height="100%" />
    <div class="over"></div>
    </div>
    </body>
    </html>





    __________________
    Mahmoud Abd El-Hamed
    Web Developer
    Mobile: +2 0192565454
    E-mail: admin(at)developspot.com
    Site: ( رابط ) http://developspot.com

  3. #3
    عضو نشيط
    تاريخ التسجيل
    May 2010
    المشاركات
    76


    السلام عليكم

    يتم عمل مثل هذه الفكره عن طريق استخدام

    كود PHP:
     position relative 
    عن طريق سى اس اس

    ويتم ذلك بوضع الصوره عاديه داخل العنصر

    مثلا
    كود PHP:
    <div>
    <
    img src="link.jpg" width="100%" height="100%" />
    </
    div
    ويتم وضع ديف اخر بعد الصوره ليصبح هكذا

    كود PHP:
     <div>
     <
    img src="link.jpg" width="100%" height="100%" />
    <
    div class='over'>
    </
    div>
     </
    div
    ويتم اعطاء كلاس باسم

    over

    خصائصه

    كود PHP:
    class {
    position:relative;
    top:-100%;

    حتى يكون محتوى الصفحه كاملة هكذا

    كود PHP:

    <!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>
    <
    style type="text/css">
    <!--
    .
    over {
        
    position:relative;
        
    top:-100%;
        
    width:100%;
        
    height:100%;
    }
    -->
    </
    style>
    </
    head>

    <
    body>
    <
    div >
    <
    img src="link.jpg" width="100%" height="100%" />
    <
    div class="over"></div>
    </
    div>
    </
    body>
    </
    html






    __________________
    Mahmoud Abd El-Hamed
    Web Developer
    Mobile: +2 0192565454
    E-mail: admin(at)developspot.com
    Site: ( رابط ) http://developspot.com

  4. #4
    عضو فعال
    تاريخ التسجيل
    May 2006
    المشاركات
    1,178


    شكراً اخي developspot

    انا كنت اعلم هذه الطريقة ولكن اللي يستخدمها جوجل هي خلفية فعلياً وليس بوزيشن راليتف

    لان في النهاية الصورة الان قابلة للحفظ كانها صورة , وايضا ليست ممتمدة لكل اطراف الشاشة

    حاول تجربة خلفية جوجل ممكن تكتشفها

    http://www.google.com

    اسفل اليمين موجود ( تغيير صورة الخلفية ) , اختر اي خلفية وقم بتجربتها على اكثر من تمدد للشاشة وتشاهد ما اقصد على الطبيعة

    وشكراً جزيلاً على محاولتك لمساعدتي





    __________________
    مبادرة حدث متصفحك - شاركوا بها في مواقعكم
    You have to know, If you pay peanuts you get monkeys

  5. #5
    عضو نشيط
    تاريخ التسجيل
    May 2010
    المشاركات
    76


    السلام عليكم

    استخدم اضافة fireBug

    وستلاحظ انها نفس الفكره التى عرضتها تقريبا ولكنه استخدم

    fixed بدل من relative

    بالفير فوكس

    والله اعلم





    __________________
    Mahmoud Abd El-Hamed
    Web Developer
    Mobile: +2 0192565454
    E-mail: admin(at)developspot.com
    Site: ( رابط ) http://developspot.com





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض