Question

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

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

Answer 1

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

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

或

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

使用动态图像路径的自定义字段时，上述内容非常有用。

如果图片位于主题目录中，则不需要PHP，让我们说图片文件夹直接位于主题文件夹/theme-name/images下，样式表为{{1然后你可以将背景图像添加到css文件中，如下所示：

/theme-name/style.css

Answer 2

你不需要在这个问题中使用PHP，你的CSS文件已经在模板文件夹中了，所以你可以像这样调用图像：

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

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

Answer 3

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

 coin.aggregate(
        {
            $match: {
                exchange: exchange
            }
        },
        {
            $unwind: "$coin_sum"
        },
        {
            $match: {
                $or: [
                    { "coin_sum.granularity": "minute", "coin_sum.timeStamp": { $lt: (expiration.minute) ? parseInt(timeStamp) - expiration.minute : 0 } },
                    { "coin_sum.granularity": "hour", "coin_sum.timeStamp": { $lt: (expiration.hour) ? parseInt(timeStamp) - expiration.hour : 0 } },
                    { "coin_sum.granularity": "day", "coin_sum.timeStamp": { $lt: (expiration.day) ? parseInt(timeStamp) - expiration.day : 0 } },
                    { "coin_sum.granularity": "month", "coin_sum.timeStamp": { $lt: (expiration.month) ? parseInt(timeStamp) - expiration.month : 0 } }
                ]
            }
        },
        {
            $group: {
                _id: "$exchange",
                remove_timeStamp: {
                    $addToSet: "$coin_sum.timeStamp"
                },
                remove_granularity: {
                    $addToSet: "$coin_sum.granularity"
                }
            }
        }
    ).allowDiskUse(true).cursor({batchSize : 1000})
        .then((res) => { //do something });

Answer 4

在标记中使用style属性并使用css。

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

Answer 5

另一种方法是使用css文件位置作为参考点来访问图像，例如，。班级名称{ 背景图像：网址（＆＃34; ../图像/文件名＆＃34）; //一级以上，然后是图像文件夹background-image：url（＆＃34; ../../ images-directory-02 / images / file-name＆＃34;）; //两个级别，然后是两个文件夹 }

Answer 6

我遇到了这个问题，在我的基于Underscores的主题中添加了背景图片，我发现这有效：

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

我第一次尝试：

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

但这对我不起作用。

Answer 7

简短的回答是你无法在CSS文件中呈现PHP。我建议您确保正确设置<rel>代码并使用/images/parralax_iamge.jpg部分。

Answer 8

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

Answer 9

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

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

Answer 10

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

Answer 11

许多人已经建议不要在.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>

Answer 12

正如其他人所建议的那样，您只需设置background-image CSS属性即可。

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

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

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

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

打开您网站的管理控制台
打开“媒体”区域
单击要使用的图像
从“ URL”字段复制URL，但仅复制域名后的部分（例如 domain-name.com ）
将其用作background-image属性的URL

我不建议使用整个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/...。

Answer 13

在第一个div中，您可以看到已批准回复的结果，在第二个div中，您可以看到

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

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

Answer 14

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

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

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

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

Answer 15

您需要回显 get_the_post_thumbnail_url() 函数

例如

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

WordPress中的CSS背景图片

15 个答案: