wordpress循环中的样式伪元素

我正在寻找一种方法将css样式赋予给wordpress循环中的元素。wordpress循环中的样式伪元素

我特别尝试将背景图像添加到伪元素，其中背景图像来自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; ?>

来源

2017-06-15 Åsmund Sollihøgda

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

后回声都需要有它自己的定制.gradient变化或独特的一些水平。我对其进行了更改，以便它可以执行.gradient- {POST_ID}。

来源

2017-06-15 15:57:20 fppz

我想你也可以做到这一点，但如果有一个页面上有很多？需要创建一个循环。但是，这也是有效的。 – Adrianopolis

你必须创建一个循环来遍历每个帖子自己的自定义背景图像。更好的解决方案是有一个通用的渐变类，无论你需要自定义背景，你都可以通过style =“background-image：url（<？php the_field（'text-background'）;？>）”来应用它相关元素 – fppz

这个工程！感谢你们！！！ –

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

来源

2017-06-15 15:57:24 Adrianopolis

我会说要使用内联样式，但我不认为伪类可能内联。一个稍微杂乱的替代可能是：

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

来源

2017-06-15 15:58:34

这将是更好的排除循环中的常见样式。检查了这一点：

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

来源

2017-06-15 16:14:21 kolunar

wordpress循环中的样式伪元素

回答

相关问题