时间戳

首页 > 解决方案 > 将 CSS 中的背景图像添加到高级自定义字段 (ACF)

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

问题描述

我有点卡在这个部分。当背景图像位于 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:after{position: 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:after{background-image: url(../svgs/Rectangle-Copy.svg); background-position: right bottom; left: auto; top: auto; right: 0; bottom: -46%; width: 63.125%;}

标签： phphtmlcsswordpressadvanced-custom-fields

解决方案

最简单的方法可能是<style>在模板中包含内联标记，使用 ACF 字段中的图像，因为您不能直接在 HTML 中的伪选择器上使用内联样式。

IE：

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

推荐阅读