Php wordpress循环中的样式伪元素

我正在寻找一种在wordpress循环中为元素提供css样式的方法

我特别尝试将背景图像添加到伪元素中，其中背景图像来自wordpress帖子。最后，我希望在每个循环帖子上都有不同的背景图片

这里的问题是所有：：before元素都获得相同的背景图像（来自循环中的最后一篇文章）

有什么想法吗

谢谢大家!

@支架（混合模式：变亮）{
.梯度{
显示：内联块；
位置：相对位置；
颜色：#000；
背景：#fff；
混合模式：倍增；
}
.梯度：：之前{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景图片：url（）；
指针事件：无；
}
.梯度：：之前{
混合模式：屏幕；
}
}

：：之前{
混合模式：屏幕；
}
}

---

Echo post需要有自己的定制。渐变变化或某种程度的独特性。我更改了它，这样它就可以了。gradient-{POST_ID}。

因为使用属性选项还没有为背景图像的黄金时间做好准备，您是否能够在块上硬编码图像，例如

style=“background image:url（）；”

？

我想使用内联样式，但我认为伪类不可能是内联的。另一个稍微麻烦一点的选择可能是：

<?php  $posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>
<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient gradient-<?php echo get_the_ID(); ?>" >
<?php the_title(); ?>
</div>

<style>
@supports (mix-blend-mode: lighten) {
.gradient {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient-<?php echo get_the_ID(); ?>::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(<?php the_field('text-background'); ?>);
    pointer-events: none;
  }
.gradient::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

---

最好将普通样式从循环中排除。看看这个：

<?php  
$posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>

<style>
@supports (mix-blend-mode: lighten) {
.gradient {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
  }
.gradient::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient gradient-<?php echo $post->ID; ?>" >
<?php the_title(); ?>
</div>

<style>
.gradient.gradient-<?php echo $post->ID; ?>::before {
    background-image: url(<?php the_field('text-background'); ?>);
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

@支架（混合模式：变亮）{
.梯度{
显示：内联块；
位置：相对位置；
颜色：#000；
背景：#fff；
混合模式：倍增；
}
.梯度：：之前{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
指针事件：无；
}
.梯度：：之前{
混合模式：屏幕；
}
}
我想你也可以这么做，但是如果一页上有很多呢？需要创建一个循环。但这也行。你必须创建一个循环来遍历每个帖子自己的自定义背景图像。一个更好的解决方案是使用一个通用的渐变类，在任何需要自定义背景的地方，都可以通过style=“background image:url（）”将其应用于相关元素
<?php  $posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>
<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient gradient-<?php echo get_the_ID(); ?>" >
<?php the_title(); ?>
</div>

<style>
@supports (mix-blend-mode: lighten) {
.gradient {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient-<?php echo get_the_ID(); ?>::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(<?php the_field('text-background'); ?>);
    pointer-events: none;
  }
.gradient::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

<?php  
$posts = get_posts(array(
'posts_per_page'    => -1,
'post_type'         => 'post',
'order' => 'ASC',
));
if( $posts ): ?>

<style>
@supports (mix-blend-mode: lighten) {
.gradient {
    display: inline-block;
    position: relative;
    color: #000;
    background: #fff;
    mix-blend-mode: multiply;
  }
.gradient::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
  }
.gradient::before {
    mix-blend-mode: screen;
  }
}
</style>

<?php foreach( $posts as $post ): setup_postdata( $post ); ?>

<div class="gradient gradient-<?php echo $post->ID; ?>" >
<?php the_title(); ?>
</div>

<style>
.gradient.gradient-<?php echo $post->ID; ?>::before {
    background-image: url(<?php the_field('text-background'); ?>);
}
</style>

<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>