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循環中的樣式僞元素

回答

相關問題