صورة CSS
وهذا الفصل تظهر لك كيفية استخدام CSS صورة تخطيط.
فيليه صور
الصور المصغرة
نحن نستخدم border الملكية لخلق الصور المصغرة.
أمثلة
الحدود: #DDD الصلبة 1PX.
الحدود بين دائرة نصف قطرها: 4PX.
الحشو: 5px؛
}
على <img SRC = "paris.jpg" بديل = "باريس">
محاولة »
أمثلة
عرض: مضمنة كتلة.
الحدود: #DDD الصلبة 1PX.
الحدود بين دائرة نصف قطرها: 4PX.
الحشو: 5px؛
الانتقال: 0.3s.
}
و: تحوم {
مربع الظل: 0 0 2px 1PX رغبا
(0، 140، 186، 0.5)؛
}
<A أ href = "paris.jpg">
على <img SRC = "paris.jpg" بديل = "باريس">
</ A>
محاولة »
صورة تستجيب
والصورة التي تستجيب تناسب تلقائيا مجموعة متنوعة من أحجام الشاشة.
سبيل المثال، يمكنك إعادة ضبط المتصفح الخاص بك لمعرفة حجم التأثير:
إذا كنت في حاجة إلى حرية لقياس الصورة، والصورة لتكبير حجم لا يزيد الحد الأقصى لقيمة الأصل، يمكنك استخدام التعليمات البرمجية التالية:
نصيحة: المحتوى على شبكة الإنترنت يمكن أن يكون أكثر استجابة إشارة تصميم CSS دروس التصميم المتجاوب .
نص الصورة
كيفية تحديد موقع النص صورة:
أمثلة
محاولة:
الزاوية اليسرى العليا >> الزاوية اليمنى العليا » الزاوية السفلى اليسرى» الزاوية اليمنى السفلى >> مركز >>بطاقة صورة
أمثلة
عرض: 80٪؛
لون الخلفية: أبيض؛
مربع الظل: 0 4PX 8px 0 رغبا (0، 0، 0، 0.2)، 0 6px 20px 0 رغبا (0، 0، 0، 0.19)؛
}
IMG {عرض: 100٪}
div.container {
مواءمة النصوص: المركز؛
الحشو: 10px 20px؛
}
محاولة »
مرشحات الصورة
المغلق filter تنسب لإضافة العناصر مع تأثيرات بصرية (على سبيل المثال: ضبابي والتشبع).
ملاحظة: إنترنت إكسبلورر، أو سفاري 5.1 (وأقدم) لا تدعم هذه الخاصية.
أمثلة
تحرير جميع الألوان لصور بالأبيض والأسود (100٪ رمادي):
-webkit التصفية: الرمادي (100٪ )؛ / * كروم، سفاري، أوبرا * /
مرشح: الرمادي (100٪).
}
محاولة »
نصيحة: زيارة CSS دليل مرشح المرجعي لمزيد من المحتوى.
معرض الصور تستجيب
أمثلة
الحشو: 0 6px؛
تطفو: اليسار،
العرض: 24.99999٪،
}
media الشاشة فقط و (ماكس-عرض : 700px) {
.responsive {
العرض: 49.99999٪،
هامش: 6px 0؛
}
}
media الشاشة فقط و (ماكس-عرض : 500px) {
.responsive {
عرض: 100٪؛
}
}
محاولة »
صور مشروط (مشروط)
يوضح هذا المثال كيفية الجمع معا CSS و JavaScript لتقديم صورة.
أولا، ونحن نستخدم CSS لإنشاء إطار مشروط (الحوار)، مخفيا بشكل افتراضي.
نحن ثم استخدام جافا سكريبت لعرض إطار مشروط عندما نضغط، سيتم عرض الصورة في نافذة منبثقة:
أمثلة
فار مشروط = document.getElementById ( 'myModal' )؛
// الحصول على وضع إطار الصورة، وتعزو صورة بديل كما هو موضح في البوب الصيني الحالي
فار IMG = document.getElementById ( 'myImg' )؛
فار modalImg = document.getElementById ( "img01" )؛
فار captionText = document.getElementById ( "عنوان" )؛
img.onclick = وظيفة () {
modal.style.display = "كتلة".
modalImg.src = this.src.
modalImg.alt = this.alt.
captionText.innerHTML = this.alt.
}
// الحصول على <SPAN> العنصر الذي يغلق مشروط
فار فترة = document.getElementsByClassName ( "وثيقة" ) [0]؛
// عندما ينقر المستخدم على <SPAN > (خ)، إغلاق مشروط
span.onclick = وظيفة () {
modal.style.display = "لا شيء".
}
محاولة »