使用CSS显示图像

Question

我在网页上显示以下图片时遇到问题。我认为这是一个坐标问题。 我想如果我抽搐-397px -85px我应该能够显示图像。然而，即使在抽搐之后我也无法显示它。有人可以帮帮我吗。

图片图标

代码，来自萤火虫。

Answer 1

您为图片提供的网址是：

http://localhost/WEBSITE/images/img-sprite2.png

提到localhost。因此，我确信您的代码可以在localhost中运行，但不能在实际网站上运行。尝试使用relative path代替absolute path。

此外，您提供的图片尺寸为126px X 133px，您指的是图片外的坐标，即帖子中显示的397px X 85px。

如果您提供了实际图片的摘录图片，请告知我们。

[注意]：还告诉设计师以缩放布局方式提供图像。看来，图像是匆忙提供的，不是放在图标的正下方或侧面。我希望你理解我的观点。

Answer 2

这是你的小提琴

#test {
    background: url('http://i.stack.imgur.com/kyVhA.png') 0 0 no-repeat;
    height:100px;
    width:100px;
}

Demo Fiddle

正如MR green提到的那样坐标超出范围 还要注意本地主机指向并尝试为图像提供相对路径。

Answer 3

试试这个......

i.phone
{
float:left;
height:56px;
vertical-align:middle;
width:56px;
background:url(http://i.stack.imgur.com/kyVhA.png) -65px -75px no-repeat;
}

Answer 4

您发布的图片似乎存在问题。特别是与个体精灵的尺寸和位置有关。

请参阅下面的代码段，了解background-position如何使用此图片sprite：

＆＃13;

＆＃13;

i.phone {
    display: inline-block;
    background-image: url(http://i.stack.imgur.com/kyVhA.png);
    background-position: -63px -3px;
    height: 52px; width: 51px;
}

i.phone:hover {
    background-position: -70px -77px;
}

＆＃13;

<i class="phone"></i>

＆＃13;

＆＃13;

＆＃13;

Answer 5

尝试添加：显示：阻止; 如果element不是块元素，则忽略高度和宽度

Answer 6

你确定你指定路径是否正确？如果是，则在要显示图像的元素上给出高度和宽度，并显示：block try this this