Question

我对此部分有点困惑。当背景图像位于html中时，我只在html中添加了ACF php。现在我的css中有2个形状，带有伪元素。我如何添加php以便它可以在wordpress上运行？

HTML

.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%;}

CSS

//Display  list
if(mysqli_num_rows($query) > 0){
    // You have many results - fetch them all iteratively
    // use `fetch_assoc` to have ability to use `mails`
    while ($row = mysqli_fetch_assoc($query)) {
        $emailArr[] = $row["mails"];
    }
    $emails = implode(";", $emailArr);

    echo $emails;
}else{
    echo 'No email for this selection.';
}

Answer 1

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

即：

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

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

1 个答案: