Question

这是我的css

.nav_arrow {
    position: absolute; top: 50%; z-index: 15;
    background-image: url(../img/arrow-navpage.png) !important;
    width: 34px; height: 136px;
    margin-top: -68px;  }

    .nav_arrow.next         { right: -34px; background-position: 0 0; }
    .nav_arrow.next:hover   { background-position: 0 -186px; }

    .nav_arrow.prev         { left: -34px; background-position: 0 -372px; display: none; }
    .nav_arrow.prev:hover   { background-position: 0 -558px; }

图片用于下一个/上一个按钮背景

但它没有加载。任何人都可以帮助我

Answer 1

使用元素检查器（press F12）查看是否正在加载图片。

在元素标签中，您可以查看CSS规则是正确的还是正确的点击元素本身
在资源标签下，您可以查看图片路径是否正确以及是否正确正在加载图像。

如果这些chechs是正确的，可能你的CSS规则存在可视化问题，可能与位置有关。

试试并告诉我们结果。

希望它有所帮助。

Answer 2

没有小提琴就很难看到问题。但首先检查是否加载了精灵图像，然后检查background-position是否有图像的每一部分。同时检查.nav-arrow容器是否有position:relative

Answer 3

也许试试这个：

 .nav_arrow.next         { right: -34px; background-position: 0px 0px; }
    .nav_arrow.next:hover   { background-position: -186px 0px; }
    .nav_arrow.prev         { left: -34px; background-position: -372px 0px; display: none; }
    .nav_arrow.prev:hover   { background-position: -558px 0px; }

我不知道为什么你使用左：-34px右：-34px; 如果这个答案没有帮助你向我们展示你的代码

CSS背景图片未加载铬

3 个答案: