php - wordpress 循环中的样式伪元素

Question

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

我特地尝试给一个伪元素添加背景图，这里的背景图来自于wordpress的帖子。最后我想在每个循环的帖子上都有不同的背景图片。

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

有什么想法吗？

谢谢!

<?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" >
<?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::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; ?>

Answer 1

<?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-<?php echo get_the_ID() ?>" >
<?php the_title(); ?>
</div>

<style>
@supports (mix-blend-mode: lighten) {
.gradient-<?php echo get_the_ID() ?> {
    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-<?php echo get_the_ID() ?>::before {
    mix-blend-mode: screen;
  }
}
</style>

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

Echo post 需要有自己的自定义 .gradient 变体或某种程度的独特性。我将其更改为 .gradient-{POST_ID}。