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

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

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

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

Итак, что я сделал, так это создал ВТОРУЮ строку изображений с непрозрачностью 30%, так что теперь у меня есть спрайт-изображение размером 250 x 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; }

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

Идея состоит в том, что мы (только) хотим СДВИНУТЬ изображение спрайта ВВЕРХ (по оси Y) и оставить ось X как есть (или была установлена ​​в предыдущих классах).

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

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

M.


jquery css background
person Mo Boho    schedule 03.05.2009    source источник
comment
stackoverflow .com/questions/4900212/ содержит аналогичный вопрос.   -  person feeela    schedule 09.12.2011

Ответы (5)


arrow_upward
12
arrow_downward

Вам не нужен второй набор иконок или использование 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 через условные комментарии.

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

person WrongAboutMostThings    schedule 20.05.2009
comment
Эта техника действительно гениальна! Я надеюсь, что больше людей проголосуют за него и сделают его лучшим ответом. - person Jesper Rønn-Jensen; 29.11.2009

arrow_upward
3
arrow_downward

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

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

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

EDIT: обновлено на основе отзывов. Начальная непрозрачность установлена.

person Zack The Human    schedule 04.05.2009
comment
Привет, Зак, единственная проблема заключается в раздутом коде, который может привести к использованию этого метода, когда есть МНОГО больших пальцев. Я надеюсь сократить это... и поэтому, возможно, нам придется использовать jQuery для этого. :) Так с твоим примером выше он изначально блеклый? а потом затухает до 100%? Или мы сначала устанавливаем непрозрачность в CSS, а затем она исчезает до 100%? Есть ли способ сделать все это в jQuery (включая начальную непрозрачность), поскольку непрозрачность является стандартом CSS3, и мы знаем, что это все еще не полностью поддерживается во всем спектре? - person Mo Boho; 04.05.2009
comment
спасибо, Зак! :) хотя я бы предпочел решение CSS - когда оно не представляется, мы пойдем с jQuery! :) Большое спасибо за вашу помощь. - person Mo Boho; 04.05.2009

arrow_upward
3
arrow_downward

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

{background-position:100% 4px;}

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

person iMezied    schedule 03.12.2010

arrow_upward
1
arrow_downward

Примечание. Чтобы это работало в 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; }

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

person Louis    schedule 03.05.2009
comment
нет, к сожалению. мы полностью теряем фоновые изображения. - person Mo Boho; 04.05.2009
comment
Обновлено с примером кода: кажется, он делает то, что вы хотите, я думаю. - person Louis; 04.05.2009
comment
Я знаю, что вы там сделали - установили :hover для каждого элемента отдельно - и в примере, который я привел, это нормально. Единственная проблема заключается в том, что когда у вас есть гораздо большее количество превьюшек — мы получаем много раздутого CSS, когда добавляем все эти дополнительные записи :hover для КАЖДОЙ тумбочки. Жаль, что нет (или есть?) какой-то команды BACKGROUND-POSITION-Y, которая ТОЛЬКО позволяла бы нам перемещать указанный элемент вдоль оси Y, оставляя ось X где угодно он был установлен ранее. - person Mo Boho; 04.05.2009
comment
здесь вам подойдет javascript. - person Louis; 05.05.2009

arrow_upward
0
arrow_downward

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

<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>
person Michiel    schedule 19.06.2009