Изменение фонового изображения при зависании

Будет ли пропорция изображения иметь какое-либо отношение к проблеме?Изменение фонового изображения при зависании

#menu { 
background: black; 
width: 100%; 
height: 45px; 
} 
#menu ul { 

text-decoration: none; 
list-style-type: none; 

} 

#menu li { 
text-decoration: none; 
display: inline; 
font-size: 30px; 
padding-left: 30px; 
} 
#menu a:hover { 
    background-image: url(images/hover.png); 

} 
#menu a { 
text-decoration: none; 
color: white; 
margin: auto 
    background-repeat: bo-repeat; 
    background-position: top center; 
    background-size: contain; 

}

При наведении на него повторяется несколько раз. Изображение составляет 2000 x 500 пикселей. Как я могу сделать это так, чтобы это изображение отображалось за словом посередине и не повторялось. Спасибо

Это парение картинки link

HTML-код

<div id="menu"> 
<ul> 
<li><a href="index.html"> Home</a></li> 
<li> <a href="#"> lalal</a></li> 
</ul> 
</div>

источник

2013-08-14 reidjako

я нажмите на демо и работал тогда, когда Я добавил и изменил код в соответствии с вашим, это не сработало :( – reidjako

Вы должны установить параметры текста, как это:

LIVE DEMO OF YOUR WEBSITE

#menu ul li a:hover 
{ 
    background-image: url(http://img.mynet.com/ha2/tayyip.jpg); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

источник

2013-08-14 09:51:48 Ali

все еще не повезло, я думаю, что мой компьютер сломан. – reidjako

Это сработало главной проблемой было изображение :) – reidjako

Я рад, что это сработало. :) – Ali

Установите background-repeat и background-position свойства, используя сокращенную нотацию

#menu a:hover { 
    background: url(images/hover.png) center center no-repeat; 
}

Чтобы разрешить все изображение в что вы должны изменить CSS для тега li:

#menu li { 
text-decoration: none; 
display: inline; 
font-size: 30px; 
width: 50px; 
padding-left: 30px; 
height: 40px; 
overflow: auto; /* Added this */ 
}

источник

2013-08-14 09:43:00

Это не работает, поскольку он показывает только один смайл l часть фотографии :( – reidjako

@ridjako Является ли это 'a' в' li' случайно? –

Да, это в ли. Мне кажется, что это должно быть очень просто, но. background-size: 100% ;, background-repeat и другие вещи, которые должны остановить его, не так ... – reidjako

#menu a:hover { background: url(images/hover.png) no-repeat center center; }

источник

2013-08-14 09:45:15 FoX

Нет сожаления, что это не сработало – reidjako

Вы можете изменить только background-image вместо всех background атрибутов.

#menu a { 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: contain; 
    background-image: url("images/no-hover.png"); 
} 
#menu a:hover { 
    background-image: url("images/hover.png"); 
}

Это все background Игнорировать регистр proberties (repeat, position ...) и изменить только image.

Это рабочий пример:

http://jsfiddle.net/B2Dbf/

источник

2013-08-14 09:49:00 M1K1O

Это самое близкое к работе, но изображение повторяет свое «я» вдоль оси y 3 раза, а его высота составляет 500 пикселей, при этом контейнер имеет высоту 50 пикселей. – reidjako

i 'd make error, 'bo-repeat' to' no-repeat' – M1K1O

Я знаю, что я исправил это :) – reidjako

Изменение фонового изображения при зависании

ответ

Смежные вопросы