PHP变量的CSS背景图像？

Question

在wordpress中有一个插件，为每个页面分配一个标题图形。您可以通过将此代码放在header.php文件中来调用该标题图形：

<?php if(function_exists('show_media_header')){ show_media_header();} ?>

这基本上调用分配的图像并将其作为IMG放在HTML中。 我想把它称为CSS的背景图像，但不知道如何。例如：

.header-graphic{ background:url("show_media_header();"); }

我知道这显然不起作用，但这应该解释我试图做的事情。

任何帮助都会很棒。 谢谢！

Answer 1

根据show_media_header（）的范围并且它实际返回图像的路径，您可以编写以下内容：

.header-graphic{ background:url("<?php echo show_media_header(); ?>"); }

然而，这当然是假设你的css在php文件中，不推荐使用。您应该考虑使用SASS或LESS。

Answer 2

动态提供静态文件（如CSS）通常是一个坏主意，因为它无法有效缓存。因此，将show_media_header()的结果直接插入到CSS中是不行的。

但是，还有另一种方法：将 这种样式插入到HTML中，如下所示：

<h3 style='background-image: url("<?= show_media_header(); ?>");'>
   Foo
</h3>

然后可以通过静态服务且不变的文件中的CSS进一步修改 - 例如：

h3 {
   background-position: left 3px top 3px;
}

这当然假设该函数只返回图像URL;我个人没有使用过Wordpress。

基于另一条评论，显然这个函数会生成一个完整的<img>标签（呃！），所以你可能需要这样做：

<h3>
   <?= show_media_header(); ?>
   Foo
</h3>

并按照适当的方式设计样式：

h3 img {
   margin: 3px 0 0 3px;
}

Answer 3

我要在这里发帖，因为没有人考虑你的陈述：

＆＃34;并将其作为IMG放在HTML＆＃34;

中

您可能需要编辑插件输出。由于show_media_header();回显一个值，因此函数本身正在创建一个<img>元素。查找插件文件，搜索该函数，然后创建另一个，复制原始文件，例如操作元素的show_media_header_bg或更改原始文件。

Answer 4

如果您使用后代CSS选择器，那该怎么样：

#page #header {
   background-image: url("image.jpg");
}

#another-page #header {
   background-image: url("another-image.jpg");
}

然后将每个页面分配给其背景图像。

在这里，我假设您可以通过ID（此处称为“页面”和“另一页”）抓取每个页面，并且您的标题模板具有标头ID。这将有助于查看一些HTML到看看如何通过CSS完全实现这一目标。

Answer 5

让它发挥作用！

在插件PHP文件中挖掘并发现：

function get_media_header_url() {
global $post;
$post_id = $post->ID;

所以我这样做了：

.header-graphic-background{ background:url("images/<?php echo get_media_header_url() ?>"); }

效果很好！ 你们绝对指出我正确的方向。致谢!!!