带有PHP变量的CSS背景图像？答案

【问题标题】：CSS Background image with PHP variable?带有PHP变量的CSS背景图像？
【发布时间】：2014-05-20 04:32:28
【问题描述】：

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

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

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

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

我知道这显然行不通，但这应该可以解释我想要做什么。

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

【问题讨论】：

【解决方案1】：

根据 show_media_header() 的范围以及它实际上返回图像的路径，您可以编写以下内容：

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

但是，这当然是假设您的 css 在 php 文件中，不建议这样做。您应该考虑改用 SASS 或 LESS。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

我会把它贴在这里，因为没有人考虑你的陈述：

"并将其作为 IMG 放入 HTML"

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

【讨论】：

这是我发现的：echo '';如何将其更改为背景图像？
您可以将其更改为echo "<div style='background-image: url(" . $dhnd_image_url_base . $load_this_media . ")' title='".$dhnd_alt_tag."'></div>"，也可以将echo 替换为return $dhnd_image_url_base . $load_this_media，而不是在header.php 上调用show_header_image(); ，而是编写一个div 或其他元素， style="background-image:url(". show_header_image_bg() . ")"

【解决方案4】：

如果你像这样使用后代 CSS 选择器会怎样：

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

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

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

在这里，我假设您可以通过 id 进入每个页面（这里称为“page”和“another-page”，并且您的 header 模板具有 header 的 id。这将有助于查看一些 HTML看看如何最好地通过 CSS 实现这一点。

【讨论】：

【解决方案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() ?>"); }

效果很好！你们绝对为我指明了正确的方向。谢谢！！！

【讨论】：