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 ?> "); ">

< 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, 你可以：

打开你网站的管理控制台
打开” 媒体” 区域
单击你要使用的图像
复制网址字段中的网址, 但仅复制域名后的部分(例如domain-name.com)
使用它作为你的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中提供上传文件的路径：