تغيير موضع خلفية CSS على المحور Y فقط

Question

طيب...إذن هنا المشكلة.

لدي صورة متحركة CSS مكونة من عشرة (10) أيقونات بحجم 25 بكسل × 25 بكسل موضوعة أفقيًا - مما يؤدي إلى الحصول على صورة متحركة بعرض 250 بكسل.

أنا أستخدم هذه الصور مقاس 25 × 25 كصور مصغرة.أتطلع إلى الحصول على عتامة بنسبة 30% على هذه الصور في العرض الأولي وعندما يمرر المستخدم فوقها، يجب أن تكون العتامة 100% (1).

إذن ما فعلته هو إنشاء صف ثانٍ من الصور مع عتامة بنسبة 30% - والآن لدي صورة متحركة بحجم 250 بكسل × 50 بكسل.أعلى 25 بكسل بنسبة 100% وأسفل 25 بكسل بنسبة 30%.

أقوم بإعداد HTML على النحو التالي:

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...

و CSS:

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
a:hover { **background-position-y**: -25px; }

ومع ذلك، يبدو أن هذا لا يعمل للأسف، نظرًا لأن الخلفية -position-y غير مدعومة في Firefox (أو أنها ليست معيارًا، ولكنها خاصة بـ IE).

الفكرة هي أننا (فقط) نريد نقل صورة الكائنات إلى أعلى (على طول المحور y) وترك المحور السيني كما هو (أو تم تعيينه في الفئات السابقة).

إذا لم يكن هناك حل CSS بسيط لهذا، فهل يمكن تنفيذ تأثير العتامة هذا باستخدام JQUERY؟إذن سيتم تحميل الإبهام بنسبة عتامة بنسبة 30٪ وستنتقل إلى نسبة عتامة بنسبة 100٪ عند تمرير المستخدم؟

تشكرات،

م.

Answer 1

وأنت لا تحتاج إلى رمز المجموعة الثانية ولا استخدام جافا سكريبت لتحقيق التأثير المطلوب.

وكما أشار لو خارج، استخدم opacity لجعل الرموز الخاص بنسبة 30٪ أو مرئية تماما. لا حاجة الى الفوضى مع background-position بعد الآن.

واذهبوا إلى الأمام وتحديد الأنماط الخاصة بك وفقا لذلك ما يلي:

a {
    opacity:0.3;  /* for standard browsers */
    filter: alpha(opacity = 30);  /* for IE */

    display: block;
    float: left;
    width: 25px;
    height: 25px;
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat;
}

a:hover {
    opacity:1.0
    filter: alpha(opacity = 100);
}

.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }

إذا كنت قلقا بشأن التحقق من كود CSS الخاص بك، واتخاذ أجزاء IE محددة (والتي لن تحقق) ووضعها في ملفات CSS تستهدف على وجه التحديد عبر <لأ href = "http://www.quirksmode.org /css/condcom.html "يختلط =" noreferrer "> تعليقات مشروطة .

وعلى أمل أن يساعد.

Answer 2

أعتقد أن إجابة Lou تفعل ما تريد أن تفعله - ما عليك سوى تحديد فئة لكل ولاية وتعيين إحداثيات x وy.

إذا كنت تريد تأثير التلاشي، إذن يمنحك jQuery طريقة للقيام بذلك.من المحتمل أن يمنحك هذا ما تريد إذا كان هذا هو الحال:

$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
    function() {
        $(this).fadeTo(300, 1.0);
    },
    function() {
        $(this).fadeTo(1, 0.33);
    }
);

يحرر:تم التحديث بناءً على التعليقات.تم الآن ضبط التعتيم الأولي.

Answer 3

وسيلة سهلة

{background-position:100% 4px;}

ويمكنك استخدام النسب مع بكسل لتحل محل الملكية خلفية موقف ذ

Answer 4

ملاحظة: للحصول على هذا العمل في موزيلا، يجب تعيين خاصية background-المرفقات ل"ثابت".

هل لديها أي تأثير؟

-

لديك 10 صور فقط، مجرد تعريف فئة المغلق لكل واحد. وبهذه الطريقة يمكنك تحديد العاشر COORD النسبي.

وفرع فلسطين. أرجو أن لا يتم استخدام هذه المغلق المحدد، وتطبيق هذا النمط إلى: أن تحوم تنطبق على جميع الروابط على الصفحة. يجب أن تكون على تطبيقه فقط نمط المصورة.

a { display: block;
    float: left;
    width: 25px;
    height: 25px; 
    background: url("test.jpg") 0 -25px no-repeat;
  }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
.thumb1:hover { background-position: 0 -25px; }
.thumb2:hover { background-position: -25px -25px; }
.thumb3:hover { background-position: -50px -25px; }

وهناك أيضا التعتيم ..

Answer 5

وبعض السهو الصغيرة، والأخطاء المطبعية ورمز لزوم لها في المثال السابق. تخمين الشفرة يمكن أن ننظر بشيء من هذا القبيل:

<style>
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); }
a.thumb1 { background-position: 0 0; }
a.thumb2 { background-position: -25px 0; }
a.thumb3 { background-position: -50px 0; }
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; }
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
</style>

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb2"></a>
<a href="largeimage2.jpg" class="thumb3"></a>