هل يمكنني تغيير مظهر صورة html أثناء التمرير بدون صورة ثانية؟

Question

هل هناك طريقة لتغيير مظهر الأيقونة (أي.التباين / اللمعان) عندما أقوم بتحريك المؤشر دون الحاجة إلى ملف صورة ثانٍ (أو دون الحاجة إلى جزء مخفي من الصورة)؟

Answer 1

إليك بعض المعلومات الجيدة حول عتامة الصورة وشفافيتها باستخدام CSS.

لذا، لجعل الصورة ذات عتامة بنسبة 50%، عليك القيام بما يلي:

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

ال العتامة: الجزء هو كيفية قيام Firefox بذلك، وهي قيمة تتراوح بين 0.0 و1.0. منقي: هذه هي الطريقة التي يقوم بها IE، وهي قيمة من 0 إلى 100.

Answer 2

لا تستخدم علامة img، بل تستخدم عنصرًا له سمة صورة الخلفية css وقم بتعيين موضع الخلفية عند التمرير.يتطلب IE علامة "a" كعنصر أصل لمحدد :hover.يطلق عليهم العفاريت CSS.

مقالة رائعة تشرح كيفية استخدام CSS sprites.

Answer 3

إليك بعض التعليمات البرمجية للعب بها.الفكرة الأساسية:ضع جميع الحالات الممكنة للصورة في صورة واحدة كبيرة، وقم بتعيين "حجم النافذة"، وهو أصغر من الصورة؛حرك النافذة باستخدام background-position.

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}

<a href="#" id="test">a button</a>

Answer 4

الطريقة التي أرى بها عادةً الأشياء يتم تنفيذها باستخدام صور أصغر مثل الأزرار التي تظهر جزءًا معينًا فقط من الصورة.بعد ذلك ستشكل العديد من حالات الصورة صورة أكبر يتم تحريكها خلف المنفذ المرئي.سأحذف هذا عندما يكون لدى شخص ما رمز.