Как переместить текст с нумерации страниц

Question

В: http://nathansearles.com/loopedslider/example-4.html, нумерация страниц на самом деле содержит цифры (вы можете увидеть это, если посмотрите исходный код). Я посмотрел на css и не могу понять, как они заставляют цифры исчезать ... Это общеизвестно, как показываются изображения и все такое, но ... да, спасибо за помощь с этим, это что-то маленькое, просто не могу понять это.

спасибо

Answer 1

Для этого они используют фоновое изображение . Взгляните на источник, используя firebug или любой живой инспектор DOM, и вы увидите

ul.pagination a
{
    background-image: url(http://nathansearles.com/loopedslider/pagination.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    display: block;
    height: 0px;
    overflow: hidden;
    padding-top: 12px;
    width: 12px;
}

Если вы измените высоту на более высокое значение, вы также сможете увидеть цифры. Все следующие объединенные значения сделают текст в части под изображением.

height: 0px; 
overflow: hidden;
padding-top: 12px;

Answer 2

ul.pagination a {background-image: url (http://nathansearles.com/loopedslider/pagination.png); background-position: 0px 0px; повторение фона: без повтора; отображение: блок; высота: 0px; overflow: hidden; padding-top: 12px; width: 12px;}

Высота и переполнение скрывают текст, в то время как padding-top допускает высоту, достаточную дляфоновое изображение для отображения.

Answer 3

нумерация страниц имеет номера в это (вы можете увидеть это, если вы посмотрите источник.) Я посмотрел на CSS и я не могу понять, как они делают цифры исчезают ...

Вот его CSS:

ul.pagination a {
display:block;
width:12px;
padding-top:12px;
height:0;
overflow:hidden;
background-image:url(pagination.png);
background-position:0 0;
background-repeat:no-repeat;
}

Скрывает число с height, равным 0, и overflow, установленным на скрытое, и показывает вместо этого изображение, используя background-position, в то время как padding-top до 12px