wordpress css 精灵加载图像

Question

我正尝试在我的 wordpress 项目中使用这样的精灵。但是我在 css 加载背景图片时遇到了问题。加载页面后，我在控制台中检查了路径，url 路径很好，但出现 404 错误。

我的 css :

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
    width : 44px;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#facebook {
    left: 0px;
    background: url('/wp-content/themes/montheme/images/facebook.png') 0 0;
}

控制台中的错误消息：无法加载资源：服务器响应状态为 404（未找到）

有人有解决办法吗？

Answer 1

你不需要使用 /wp-content/themes/montheme/ 你可以这样称呼它：

background: url("images/facebook.png") 0 0;

如果您的图片和 CSS 存在于您的主题中。另一种方法是将其添加到您的 functions.php 并将其命名为：

background: url("<?php bloginfo('template_directory'); ?>/images/facebook.png") 0 0;

wordpress css 精灵加载图像

wordpress css sprite load image

css

wordpress

sprite