CSS 'background-image' неправильно изменен

Я нахожусь в середине панели навигации. Я пришел сюда раньше и получил некоторую помощь в реорганизации и кодировании указанного предмета. Все казалось здоровым, и казалось, что он должен работать, но при использовании следующего кода вместо каждого изменения размера изображения он показывал только X% высоты изображения и Y% ширины изображений. Я не могу понять, что происходит не так.CSS 'background-image' неправильно изменен

CSS:

#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; } 

#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }

Пожалуйста, обратитесь к how it looks looks on my website, чтобы увидеть, что я имею в виду. См. Также my other navbar question.

Спасибо.

источник

2012-05-21 Cythis

Фоновые изображения не изменяются. Они показаны в полном размере и обрезаются, если контейнер меньше.

Что вы можете сделать:

Наилучший подход, чтобы изменить размер изображения до заданного размера

хака подход заключается в использовании абсолютно позиционирован <img> тегов в качестве фона и <span> текста в качестве переднего плана.

<div class="hasBg"> 
    <img> 
    <span>text</span> 
<div> 

.hasBg{ 
    position:relative; 
} 
//will autofit depending on how span stretches the container 
.hasBg img{ 
    position:absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
} 

.hasBg span{ 
    position:absolute; 
}

Уроженец но новая функция заключается в использовании нового CSS3 background-size. но это не является кросс-браузер AFAIK

источник

2012-05-21 04:41:23 Joseph

Что касается совместимости CSS, отличный сайт, чтобы использовать это CanIUse.com, вот фон -size http://caniuse.com/#search=background-size. Похоже, что у него может быть хорошая поддержка, за исключением очень важного IE-пула. Я не уверен, что для этого существует многопользовательская работа JS. Но можно использовать Modernizr для ремесла и альтернативного опыта для тех, кто без него. – jmbertucci

Так как вы сделали это в качестве фонового изображения, ширина и высота атрибуты применимы только к DIV, а не изображения.

У вас есть два варианта.

Изменение размера изображения в соответствии с размерами
имеют изображения на странице и использовать JavaScript для парения эффекта

источник

2012-05-21 04:43:53 dpDesignz

CSS 'background-image' неправильно изменен

ответ

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