如何在样式表中引用主题图像？

时间：2015-05-19 作者：Andrew

我有一个全局元素作为我的主题的一部分，我需要引用和图像作为背景图像。我需要图像的URL。我假设对URL进行硬编码是一种不好的做法，并且URL需要与主题位置相关。在样式表中引用图像的推荐方式是什么？

3 个回复
最合适的回答,由SO网友:m4n0 整理而成

这取决于图像和样式表的位置。

但这是语法：

.theme-image {
  background-image: url(\'../images/header-img.jpg\');
}
以上代码用于结构

wp-content
 - themes
  - your-theme 
    - images
     - header-img.jpg
    - css
     - style.css
您正在使浏览器位于一个目录之前并搜索图像目录。

SO网友:Frank Belin

我对URL的相对性有一个问题。我的意思是，当从第三个或更深的子类别中打开类别概述时，如下所示：

-nature
--animals
---wolves >>>3rd level
--birds

狼的URL将变为：/类别/自然/动物/狼/因此imagelocation之前是一个目录级别，不会显示。

所以我尝试了这个，它成功了：

.sidebar-row .widget {
  background-image: url("../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../../wp-content/uploads/.../image.webp");
}
错误位置上的图像将被忽略，正确位置上的图像将显示。

顺便说一句：我用的是；简单CSS“-用于更改我的网站布局的插件。

SO网友:Michael C.

对于WordPress，应该是这样的：

   background:url(\'../wp-content/themes/yourtheme/images/social-icons-v2-opt.png\');

For Child Theme

   background:url(\'../wp-content/themes/yourtheme-child/images/social-icons-v2-opt.png\');

结束
标签： images   css   urls   小码农  

相关推荐

如何在我的iframe插件中插入html/css/js？

我目前有一个iframe插件，它通过短代码显示在WordPress页面上。目前，我一直在iframes“src”中显示网站，但最近我遇到了一个问题，即显示我自己的html/css/js页面。Here is a functioning html page for a chatbox that I would like to include in my iframe.聊天室的文件很大，显示聊天室的html文件使用谷歌的cdn，并从其他文件获取脚本/样式标记。The code for my iframe plu