Как заменить img на DIV с фоновым изображением? - PullRequest
Новая
       4

Как заменить img на DIV с фоновым изображением?

1 голос
/ 24 августа 2011

Я хочу оптимизировать свой код. Я думаю, что я правильно сказал, что если я объединю несколько изображений в один файл, то я не смогу использовать атрибут позиции, если изображения не являются частью фонового изображения. Но я не уверен, как настроить мой DIV. Нужно ли устанавливать ширину и высоту DIV? Нужно ли делать отображение: блок или что-то подобное?

Вот код, который у меня есть: 

<ul>
<li><a class='disabled' ><img width='16' height='16' src='../../Content/Icons/home.png' />Home</a></li>
<li><a href='xx'  title='xx'><img width='16' height='16' src='../../Content/Icons/xx.png' />xx</a></li>
<li><a href='yy'  title='yy'><img width='16' height='16' src='../../Content/Icons/yy.png' />yy</a></li>
</ul>

Ответы [ 2 ]

1 голос
/ 24 августа 2011

если у вас есть несколько изображений в одном файле, я бы порекомендовал вам добавить несколько классов, как сказал @pduersteler. 

ul li a { display: inline-block; position: relative; width: 16px; height: 16px; }
ul li a.one { background: url('../../Content/Icons/home.png') left top no-repeat; }
ul li a.two { background: url('../../Content/Icons/home.png') -16px top no-repeat; }
ul li a.three { background: url('../../Content/Icons/home.png') -32px top no-repeat; }

Как то так ...

1 голос
/ 24 августа 2011

Если я получил это, вы хотите ссылки с иконками, верно?

Добавить несколько классов 

<a class="icon home">Home</a>

И добавить CSS 

.icon
{
    padding: 0 0 0 20px;
    background-repeat: no-repeat;
}

.icon.home
{
    background-image: url('path/to/your/icon_home.png');
    background-position: 0px 20px;
}

Теперь вам просто нужно поиграть с отступами.

EDIT
Похоже, вы хотите использовать спрайты. В List Apart есть хорошая статья о спрайтах.

...