WordPress：CSS 属性被取消了？

Question

在我的 page.php 中，我试图在 .page-wrapper div 中输出特色图像，并在页面顶部使用 style="background-image: url('<?php echo $thumb['0'];?>') !important;" 显示（内联 css）

问题是它不断被浏览器划掉。可能是因为有一个 3rd 方插件并且可能会覆盖它 - 所以我尝试将 !important 标签添加到我的属性中。不工作。而且我禁用了插件，没有运气。想法？？

页面链接：http://radian3.com/events/

这是page.php

<div class="about-container">
<!--  The POST LOOP -->
    <?php  if(have_posts()) :
              while (have_posts()) : the_post(); ?>
                  <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

                  <div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>') !important;">

                 <b class="about-title"><?php the_title(); ?></b>
                 <!-- <div class="about-icon-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')"></div> -->
                 </div>
                 <div class="contact-body-wrapper">
                 <?php the_content(); ?>    
                 </div> 
                    <?php endwhile; ?>

                        <?php else : 
                            echo '<p>No content found..</p>';

                        endif;         
                    ?>

CSS

/* single.php  page */
.page-wrapper {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
/*  background-image: url('../img/about-our-team.jpg') !important;
*/  height: 30rem;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 1

实际上，它在 page.php 中的代码正在执行覆盖。

您看到的图像被划掉了包含在您的 css 文件中的 id，带有 emply url 的图像是由您的代码生成的。

您的代码没有返回任何图像，因此您需要解决这个问题。除非您明确定义了 $post，否则它不会在此处具有值，因此 $post->ID 将为空。 您应该在循环内use get_the_ID()，即

<?php 
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'full' );
if ($thumb){
?>
      <div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')">
<?php 
// rest of your code....
}

仅供参考，您还应该检查以确保 $thumb 具有值 - 如果没有，您可以改用默认占位符

Answer 2

您需要删除不设置图像的内联样式属性，但它会覆盖 page-wrapper 的背景图像 url 的 css

您需要从page-wrapper div 中删除以下属性。

style="background-image: url('') !important;"

Answer 3

请这样给予

background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");