在div中将特色图像设置为背景

时间:2014-11-10 03:49:03

标签: php css wordpress

在搜索互联网后,我发现了一种将Wordpress特色图像设置为div中的背景图像的方法。现在的问题是我只能在线设置该div的背景图像的样式。我希望能够在我的css文件中设置样式,但我不确定如何。

这是我的代码:

<?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>
<div style="background: url(<?php echo $src[0]; ?> ) no-repeat center; width:100%; height: 300px; background-size:cover;"></div>

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分:1)

CSS文件是静态的,但WordPress的特色图像和附件是动态的。处理此问题的最佳方法是将background-image设置为内联,并在CSS文件中设置其余的背景属性。

<强> PHP

<div class="featured-image" style="background-image: url('<?php echo esc_url( $src[0] ); ?>')"></div>

<强> HTML

.featured-image {
    background: no-repeat center;
    width: 100%;
    height: 300px;
    background-size: cover;
}

答案 1 :(得分:0)

将此代码与内联css echo wp_get_attachment_url( get_post_thumbnail_id() );

一起使用