WordPress中的CSS背景图片

是否可以像使用WordPress时通常在HTML中那样在CSS中获得背景图像。我已经尝试过这样做, 但是没有用。

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

#1

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

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

or

<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")
}

#2

你无需在此问题中使用PHP, 你的CSS文件已经在template文件夹中, 因此你可以像这样调用图像：

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

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

#3

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

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

#4

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

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

#5

在标记中使用样式属性, 然后使用CSS。

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

#6

另一种方法是使用css文件位置作为参考点访问图像, 例如.class-name {background-image：url(” ../ images / file-name”); //上一层, 然后是images文件夹background-image：url(” ../../ images-directory-02 / images / file-name”); //两个级别, 然后在}中两个文件夹

#7

我在将背景图片添加到基于Underscores的主题时遇到了这个问题, 我发现这可行：

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

我首先尝试：

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

但这对我没有用。

#8

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

#9

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

＃10

你不能将php代码添加到.css文件中。但是, 如果你想使用php来执行此操作, 请参见此内容。

＃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>

＃12

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

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

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

对于所有将你的图像存储在”媒体”区域中的人：

为了找到图像的URL, 你可以：

1. 打开你网站的管理控制台
2. 打开”媒体”区域
3. 单击你要使用的图像
4. 复制网址字段中的网址, 但仅复制域名后的部分(例如domain-name.com)
5. 使用它作为你的background-image属性的URL

我不建议使用整个URL(在不删除域名的情况下使用它), 因为如果你的域名发生变化, URL将会中断。

这是我的完整URL外观的示例：https://example.com/wp-content/uploads/2018/06/ <图像名称> .jpeg, 但我只使用了/ wp-content / uploads / 2018/06 / <图像名称> .jpeg部分。

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

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

附带说明一下, 该URL既可以使用正斜杠/ wp-content / …, 也可以不使用wp-content /…。

＃13

在第一个div中, 你可以查看已批准回复的结果, 在第二个div中, 你可以查看以下来源的结果

<div style =” background-image：url(‘<？= get_the_post_thumbnail_url();？>’);”>

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

＃14

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

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

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

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