CSS background-изменение положения только по оси Y

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

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

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

Итак, я создал вторую строку изображений с их непрозрачностью в 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).

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

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

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

м.

13
background css jquery

5 ответов

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

как указал Лу, используйте opacity чтобы сделать ваши значки 30% или полностью видимыми. Нет необходимости возиться с

12

Я считаю, что ответ Лу делает то, что вы хотите, чтобы он сделал-вам просто нужно определить класс для каждого состояния и установить координаты 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;}

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

3

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

это имеет какое-либо отношение?

--

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

ps. Я надеюсь, что вы не используете этот точный css, применяя этот стиль к a: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; }

появилась непрозрачность..

1

некоторые небольшие упущения, опечатки и ненужный код в предыдущем примере. Думаю, ваш код может выглядеть примерно так:

<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>
0