Изменение фона в CSS только на оси Y

Question

Хорошо ... вот в чем проблема.

У меня есть спрайт-изображение CSS, состоящее из десяти (10) значков 25px x 25px, расположенных горизонтально - в результате получается спрайт шириной 250px.

Я использую эти изображения 25x25 в качестве миниатюр. Я надеюсь, что при начальном просмотре непрозрачность этих изображений составляет 30%, а когда пользователь наводит на них курсор, непрозрачность должна составлять 100% (1).

Итак, я создал ВТОРОЙ ряд изображений с непрозрачностью 30% - так что теперь у меня есть спрайт изображения размером 250 на 50 пикселей. Верхние 25px на 100% и нижние 25px на 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; }

Однако, к сожалению, это не работает, так как background-position-y НЕ поддерживается в Firefox (или не является стандартом, но зависит от IE).

Идея состоит в том, что мы (только) хотим сдвинуть изображение спрайта ВВЕРХ (вдоль оси y) и оставить ось x как есть (или была установлена ​​в предыдущих классах).

Если для этого не существует простого решения CSS - можно ли сделать этот эффект непрозрачности с помощью JQUERY? Таким образом, большие пальцы будут загружаться с непрозрачностью 30% и перейдут к непрозрачности 100%, когда пользователь наводит курсор?

Большое спасибо,

* * 1 022 М.

Answer 1

Вам не нужен второй набор значков или использование JavaScript для достижения желаемого эффекта.

Как указал Лу, используйте 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 с помощью условных комментариев .

Надеюсь, это поможет.

Answer 2

легкий путь

{background-position:100% 4px;}

вы можете использовать происхождение с пикселем для замены свойства background-position-y

Answer 3

Я полагаю, что ответ Лу делает то, что вы хотите, - вам просто нужно определить класс для каждого состояния и установить координаты x и y.

Если вам нужен эффект затухания, то jQuery дает вам способ сделать это . Это, вероятно, может дать вам то, что вы хотите, если это так:

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

РЕДАКТИРОВАТЬ : Обновлено на основе обратной связи. Начальная непрозрачность теперь установлена.

Answer 4

Примечание. Чтобы это работало в Mozilla, свойство background-attachment должно быть установлено на «fixed».

Это имеет какое-то отношение?

-

У вас есть только 10 изображений, просто определите класс CSS для каждого. Таким образом, вы можете указать относительную координату x.

пс. Я надеюсь, что вы не используете этот точный CSS, применение этого стиля к: hover применимо ко всем ссылкам на странице. Вы должны применять его только к изображенному стилю.

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>