将 CSS 中的背景图像添加到高级自定义字段 (ACF)

Posted

技术标签:

【中文标题】将 CSS 中的背景图像添加到高级自定义字段 (ACF)【英文标题】:Adding background image in CSS to Advanced Custom Field (ACF) 【发布时间】:2018-11-24 05:47:08 【问题描述】:

我在这部分有点卡住了。当背景图像位于 html 中时,我只在 html 中添加了 ACF php。现在我的 css 中有 2 个带有伪元素的形状。我将如何添加 php 以便它在 wordpress 上工作?

HTML

<section class="main-content-section home">
         <section class="hero-section" style="background-image: url(images/home-hero@2x.jpg);"></section></section>

CSS

.hero-section:before,.home .hero-section:afterposition: absolute; left: 0; top: 0; content: ""; background-image: url(../svgs/Rectangle.svg); background-position: left top; background-size: contain; background-repeat: no-repeat; width: 64.25%; height: 100%; z-index: -1;
.home .hero-section:afterbackground-image: url(../svgs/Rectangle-Copy.svg); background-position: right bottom; left: auto; top: auto; right: 0; bottom: -46%; width: 63.125%;

【问题讨论】:

After 前面应该有两个冒号:.hero-section::after 使用第 n 个元素可以解决这个问题吗? 并不真正需要使用伪元素 - 您可以在部分和样式之后动态地回显出您想要的任何内容。像&lt;div class="theFakePseudo"&gt;&lt;img class="whateverIcon" src="&lt;?php echo get_field('your_acf_image_field')['sizes']['thumbnail'];?&gt;" alt="It's an icon"&gt;&lt;/div&gt; 【参考方案1】:

执行此操作的最简单方法可能是在模板中包含内联 &lt;style&gt; 标记,使用 ACF 字段中的图像,因为您不能直接在 HTML 中的伪选择器上使用内联样式。

即:

<style type="text/css">
    .home .hero-section:after  
         background-image: url('<?= get_field('your_acf_image_field')['url'] ?>'); 
    
</style>

【讨论】:

以上是关于将 CSS 中的背景图像添加到高级自定义字段 (ACF)的主要内容,如果未能解决你的问题,请参考以下文章

php 将重力表单文件上载到高级自定义字段WordPress中的图像/文件字段

将高级自定义字段添加到 WooCommerce 产品变体

高级自定义字段获取子字段图像

我想使用高级自定义字段从前端上传图像

Django Allauth - 如何将自定义 CSS 类添加到字段?

将标签和图像动态添加到 Android 中的自定义视图