使用WordPress时,是否可以像在HTML中一样使用CSS获取背景图像。我尝试过这样做,但它不起作用。
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
答案 0 :(得分:19)
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
答案 1 :(得分:5)
你不需要在这个问题中使用PHP,你的CSS文件已经在模板文件夹中了,所以你可以像这样调用图像:
background-image: url("images/parallax_image.jpg");
因此,您无需知道从主题调用图像的模板路径。
答案 2 :(得分: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 });
答案 3 :(得分:1)
在标记中使用style属性并使用css。
<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>
答案 4 :(得分:1)
另一种方法是使用css文件位置作为参考点来访问图像,例如, 。班级名称{ 背景图像:网址(&#34; ../图像/文件名&#34); //一级以上,然后是图像文件夹background-image:url(&#34; ../../ images-directory-02 / images / file-name&#34;); //两个级别,然后是两个文件夹 }
答案 5 :(得分:1)
我遇到了这个问题,在我的基于Underscores的主题中添加了背景图片,我发现这有效:
background: url('assets/img/tile.jpg') top left repeat;
我第一次尝试:
background: url('/wp-content/themes/underscores/assets/img/tile.jpg');
但这对我不起作用。
答案 6 :(得分:0)
简短的回答是你无法在CSS文件中呈现PHP。我建议您确保正确设置<rel>
代码并使用/images/parralax_iamge.jpg
部分。
答案 7 :(得分:0)
只需在页面中使用浏览器工具/检查器找到相应的元素(标记,类或ID),然后在子主题的样式表中或在“customCSS”字段中为该元素添加CSS规则。主题选项。
答案 8 :(得分:0)
一种方法是将此CSS添加到可以访问bloginfo()
函数的PHP页面。在index.php
中说,你会添加......
<style>
.some-element {
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
}
</style>
答案 9 :(得分:0)
您无法将PHP代码添加到.css文件中。但如果您想使用php执行此操作,请参阅this。
答案 10 :(得分:0)
许多人已经建议不要在.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 :(得分:0)
正如其他人所建议的那样,您只需设置background-image
CSS属性即可。
但是,其他答案所建议的URL都不适合我。
我认为原因是因为我所有的图像都存储在“媒体”区域中。
对于所有将您的图片存储在“媒体”区域中的人:
为了找到图像的URL,您可以:
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/...
。
答案 12 :(得分:0)
在第一个div
中,您可以看到已批准回复的结果,在第二个div
中,您可以看到
<div style="background-image: url('<?= get_the_post_thumbnail_url(); ?>');">
它在第一个div
中不起作用的原因是因为解析器认为第一个文本块在第二个"
出现的地方结束。
答案 13 :(得分:0)
只需将您的图片上传到WordPress 媒体库
之后,您可以像这样在CSS中提供上传文件的路径:
background-image:url('/wp-content/uploads/2019/12/filename.png');
注意:打开上传的图片,会有一个路径
答案 14 :(得分:0)
您需要回显 get_the_post_thumbnail_url() 函数
例如
style="background-image: url('<?php echo get_the_post_thumbnail_url();?>