Изменение фонового положения CSS только по оси Y

Итак... вот в чем проблема.

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

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

Так что я сделал, это создать SECOND ряд изображений с их непрозрачностью на 30% - так что теперь у меня есть спрайт-образ размером 250px x 50px. Верхний 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).

Идея состоит в том, что мы (только) хотим СДЕЛАТЬ изображение спрайта UP (вдоль оси Y) и оставить ось x как есть (или была установлена в предыдущих классах).

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

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

М.

Ответ 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 через условные комментарии.

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

Ответ 2

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

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

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

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

Ответ 3

простой способ

{background-position:100% 4px;}

вы можете использовать свойство parentage with pixel для замены свойства background-position-y

Ответ 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; }

Существует также непрозрачность..

Ответ 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>