Question

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

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

这里的问题是all :: 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}。

Answer 2

由于使用属性选项尚未准备好用于背景图像的黄金时间，您是否能够对块上的图像进行硬编码，例如style="background-image: url(<?php the_field('text-background'); ?>);"？

Answer 3

我会说使用内联样式，但我不认为伪内联可能是内联的。稍微麻烦的替代方案可能是：

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

Answer 4

最好从循环中排除常见样式。看看这个：

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

在wordpress循环中的样式伪元素

4 个答案: