html - li 来自图像/图标

Question

我想听听我是如何把文字直接从像屋顶一样的图片中取出来的，

CSS:

ul.bruger {
    list-style-position: inside;
}
.login {
    list-style: none;
    background-image: url('/img/topmenu/login.png');
    background-repeat: no-repeat;
    backgroud-position: 0px 0px; /* ret til så det passer */
    padding: 5px 10px;
    border-right: 2px solid #a9a9a9;
    margin: 2px;
}
.login p {
    margin: 0 0 0 20px;
}

HTML:

<ul class="bruger">
<li class="login"><p>Login</p></li>
<li class="login"><p>Make</p></li>
</ul>

问题可以在这里看到: http://billedeupload.dk/?v=FcSx.png

我希望它看起来像这样: http://billedeupload.dk/?v=wSQfe.png

Answer 1

你可以将你的背景居中，我猜这是你的图像:

.login {
  background-position: 10px center;
}

第一个值是水平位置，第二个值是垂直位置。