use*_*ent 2 html css php wordpress
我创建了一个部分来显示所有帖子内容。我现在的工作是将帖子缩略图设置为背景图像。
这里是本节的结构:
<section id="testimonials">
<div class="testimonials-container">
<div class="heading-container">
<h3 class="page-title">Testimonials</h3>
</div>
<div class="testimonials-box">
<?php
$queryposts = array(
'post__in' => array(75,73),
'post_type' => 'post',
'posts_per_page' => -1,
'order' => 'ASC'
);
$lastblog = new WP_Query( $queryposts );
if($lastblog->have_posts() ):
while($lastblog->have_posts()): $lastblog->the_post(); ?>
<div class="testimonial-wrapper">
<div class="testimonial-item">
<p class="test-content"><?php the_content(); ?></p>
<p class="test-title"><?php the_title(); ?></p>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class"image-class" style="background-image: url('<?php echo $thumb['0'];?>')"></div>
</div>
</div>
<?php endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</section>
Run Code Online (Sandbox Code Playgroud)
这是我的CSS:
section#testimonials {
height: 400px;
background-image: url(images/testimonials-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
.testimonial-wrapper {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.image-class{
display: block;
width: 125px;
height: 125px;
background-size: cover;
background-repeat: no-repeat;
}
Run Code Online (Sandbox Code Playgroud)
当我尝试查看该页面时,该图像没有显示并试图检查该页面,结果显示如下:
background-image: url((unknown));
Run Code Online (Sandbox Code Playgroud)
如何将缩略图设置为div框的背景图像?
希望你能帮忙
请尝试以下代码,
<?php $thumb = get_the_post_thumbnail_url(); ?>
<div class"image-class" style="background-image: url('<?php echo $thumb;?>')"></div>
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
5026 次 |
最近记录: |