从计算机上传图像文件并在 Wordpress 中设置为 div 背景图像答案

【问题标题】：Upload image file from computer and set as div background image in Wordpress从计算机上传图像文件并在 Wordpress 中设置为 div 背景图像
【发布时间】：2018-08-23 19:16:15
【问题描述】：

我一直在寻找一种方法，基本上允许用户在 WordPress 后端上传图像，并将图像在前端用作 div 的背景图像，因此允许支持以下 CSS

background: url('');
background-repeat: no-repeat;
background-size: cover;

我发现了一个问题，它有一个我喜欢的答案，但我对 PHP 不是很好，并且不知道如何使用“工具集类型”来实现它，以便它将背景 url 添加到样式表并覆盖它当客户想要添加一个新图片。 How to upload image file from computer and set as div background image using jQuery?

我也可以将图像放在页面本身，并允许用户这样做，但我需要使用背景属性，以便图像覆盖 div。如果有人知道任何样式可以在没有背景样式的情况下做到这一点，那就太好了。

【问题讨论】：

标签： css wordpress

【解决方案1】：

我建议你看看Advanced Custom Fields。您可以添加将图像上传到帖子、页面、自定义帖子类型、术语等的功能。

图片上传后，您可以检索网址。如果它被上传到一个帖子，你可以像这样得到它。

<?php
  $image_url = get_field('image', $post_id);
?>

并将背景图片的url设置为div。

<div class="bg__full" style="background-image: url('<?php echo $image_url ?>')></div>

然后，您可以使用其他内联属性或类似 css 的方式设置 div 的样式。

.bg__full {
  background-repeat: no-repeat;
  background-size: cover;
}

【讨论】：

【解决方案2】：

//WordPress

要求 -

安装这两个插件后，导航到 WordPress 后端中的“自定义字段”并创建您的自定义图像字段（确保保存您的字段）。 Custom Image Field Picture

然后导航到 XYZ PHP 代码，并使用以下代码创建代码 sn-p -

<?php
$image_url = get_field('Your_Custom_Field');
?>
<div class="Your_Image_Class" style="background-image: url('<?php echo $image_url ?>')"></div>

确保将'Your_Custom_Field' 更改为您自己的，以及class="Your_Image_Class"。

从这里，您可以保存并导航回“XYZ PHP 代码”的主页并获取它提供的简码。 Image Of Shortcodes

将短代码放在要显示图片的页面中，然后滚动到该页面的底部并添加图片。如果一切顺利，您的图像应该开始显示为此类 div 的背景。

感谢 Gregor Ojstersek 的帮助

【讨论】：