Question

在http://nathansearles.com/loopedslider/example-4.html，分页实际上有数字（你可以看到这个，如果你查看源代码。）我看着css，我无法弄清楚它们是如何使数字消失的...... obvoius如何显示图像以及所有这些...但是，谢谢你帮助这个，它的东西很小，只是想不出来。

感谢

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

分页实际上有数字它（如果你看，你可以看到这个来源。）我看着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

Answer 3

ul.pagination a { background-image：url（http://nathansearles.com/loopedslider/pagination.png）; background-position：0px 0px; background-repeat：no-repeat; 显示：块; 身高：0px; 溢出：隐藏; padding-top：12px; 宽度：12px; }

高度和溢出隐藏文本，而填充顶部允许足够的高度以显示背景图像。

如何从分页项目中移动文本

3 个答案: