WordPress 中的 CSS 背景图像答案

【问题标题】：CSS background images in WordPressWordPress 中的 CSS 背景图像
【发布时间】：2017-10-06 17:16:39
【问题描述】：

在使用 WordPress 时，是否可以像在 HTML 中一样使用 CSS 获取背景图像。我试过这样做，但它不起作用。

background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");

【问题讨论】：

标签： php css wordpress wordpress-theming

【解决方案1】：

如果您的图像文件夹与您的主题文件夹相关 theme-folder/images 而你的 css 在这个结构中 theme-folder/css/your-css-file.css 您可以轻松地遍历 CSS 中的文件夹路径，例如 .custom-element{ background-image: url(../images/name-of-image.png) }

【讨论】：

【解决方案2】：

你需要回显 get_the_post_thumbnail_url() 函数

例如

style="background-image: url('<?php echo get_the_post_thumbnail_url();?>

【讨论】：

【解决方案3】：

只需将您的图片上传到 WordPress 媒体库

之后，您可以像这样在 CSS 中给出上传文件的路径：

background-image:url('/wp-content/uploads/2019/12/filename.png');

注意：打开上传的图片，会有路径

【讨论】：

【解决方案4】：

在第一个div 中，您可以看到批准响应的结果，在第二个div 中，您可以看到结果来自

<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">

它在第一个div 中不起作用的原因是因为解析器认为第一个文本块在第二个" 出现的地方结束。

【讨论】：

【解决方案5】：

正如其他人所建议的，您可以简单地设置background-image CSS 属性来执行此操作。

但是，其他答案建议的 URL 都不适合我。

我认为原因是因为我所有的图像都存储在“媒体”区域中。

所有将您的图片存储在“媒体”区域的人：

为了找到图片的 URL，您可以：

打开您网站的管理信息中心
打开“媒体”区域
点击您要使用的图片
从 URL 字段复制 URL，但只复制域名后面的部分（例如 domain-name.com）
将其用作background-image 属性的网址

我不建议使用整个 URL（使用它而不删除域名），因为如果您的域名发生变化，该 URL 将会中断。

这是我的完整 URL 的示例：https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpeg，但我只使用了/wp-content/uploads/2018/06/<Name of the Image>.jpeg 部分。

最后，我的 CSS 属性如下所示：

background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");

附带说明，该 URL 可以使用正斜杠 /wp-content/... 开头，也可以不使用 wp-content/...。

【讨论】：

【解决方案6】：

我在将背景图片添加到基于下划线的主题时遇到了这个问题，我发现这很有效：

background: url('assets/img/tile.jpg') top left repeat;

我第一次尝试：

background: url('/wp-content/themes/underscores/assets/img/tile.jpg');

但这对我不起作用。

【讨论】：

【解决方案7】：

另一种方法是使用 css 文件位置作为参考点来访问图像，例如。班级名称{ 背景图像：url（“../图像/文件名”）； //上一层，然后是图像文件夹 background-image:url("../../images-directory-02/images/file-name"); //向上两层，然后是两个文件夹 }

【讨论】：

【解决方案8】：

如果图像文件夹在主题文件夹中，您可以使用：

background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");

【讨论】：

【解决方案9】：

PHP 代码不能在.css 文件中运行，但是可以使用内联样式，例如：

<div style="background-image: url("<?php //url ?>");">

或

<style>
  .class-name {
    background-image: url("<?php //url ?>");
  }
</style>

在处理动态图像路径的自定义字段时，上述内容会很有用。

如果图片位于主题目录，则不需要PHP，假设图片文件夹直接在主题文件夹/theme-name/images下，样式表为/theme-name/style.css，则添加背景即可图片到css文件如下：

.class-name {
  background-image: url("images/file.jpg")
}

【讨论】：

【解决方案10】：

正如许多人已经建议的那样，不要在 .css ext 中使用 php，因为它不会被解释。

但是如果你真的需要使用php，因为一些你只知道你没有响应的原因，你可以将你的样式表的扩展名更改为.php

那么你可以拥有

customestyles.php

<?php
    header("Content-type: text/css; charset: UTF-8");
   $sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg";

?>
<style type="text/css">

    .selector{

        background-image: url(<?php echo "$sectionImage";?>);
    }
</style>

【讨论】：

【解决方案11】：

在标签中使用样式属性并使用css。

<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>

【讨论】：

样式属性不再符合标准并被认为是有害的。见stackoverflow.com/questions/2612483/…

【解决方案12】：

您不能将 php 代码添加到 .css 文件中。但如果您想使用 php 执行此操作，请参阅 this。

【讨论】：

【解决方案13】：

一种方法是将此 CSS 添加到可以访问 bloginfo() 函数的 PHP 页面。在index.php 中说，你会添加...

<style>
  .some-element { 
    background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
  }
</style>

【讨论】：

【解决方案14】：

本题不用PHP，你的CSS文件已经在template文件夹下，可以这样调用image：

background-image: url("images/parallax_image.jpg");

因此，您无需知道模板路径即可从您的主题中调用图像。

【讨论】：

【解决方案15】：

只需在页面中使用浏览器工具/检查器找到相应的元素（标签、类或 ID），然后在子主题的样式表中或在“customCSS”字段中为该元素添加 CSS 规则主题选项。

【讨论】：

【解决方案16】：

简短的回答是您不能在 CSS 文件中呈现 PHP。我建议确保您的<rel> 标签设置正确，并且只使用/images/parralax_iamge.jpg 部分。

【讨论】：