将图像放入背景图像答案

【问题标题】：putting image into background imag e将图像放入背景图像
【发布时间】：2015-05-28 22:11:17
【问题描述】：

我的 Wordpress 网站中有以下代码

HTML

    <div class="test">
            <?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
                <img alt="icn" src="<?php bloginfo('template_directory'); ?>/img/logo.png"> 
            <?php } elseif(has_category( 'event' )) { ?>
                <img alt="icn" src="<?php bloginfo('template_directory'); ?>/img/logo.png"> 
            <?php } ?>  
    </div>

这会将图像放在类别名称的位置。（类别名称“更新”= logo.png）

我的问题是我希望它们的尺寸响应，因为它们将被放置在响应高度 div 之上。我的想法是将它们变成“测试”div 的背景图像。我似乎无法重写 img 标记代码以将它们作为 div 的背景图像，而不仅仅是放置图像本身。

编辑前。

<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
<div style="background-image:url('...');">
...

【问题讨论】：

尝试将您的第一个标签更改为
我试过了，我目前的尝试是我在编辑下添加的。我认为如果我能发现将其放入 ('...') 部分，它会起作用
当你尝试这个时你得到了什么？请注意，您必须提供 div 的宽度和高度值（以百分比表示，因为它必须是响应式的），否则它不会显示任何内容，因为它的高度将为 0。
我添加了 10% 的填充进行测试，我正在使用 background-color: red;它显示一个红色方块，但没有图像

标签： php jquery html css wordpress

【解决方案1】：

你有没有尝试过这样的事情：

<div class="test">
<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } elseif(has_category( 'event' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } else { ?>
  <div class="bg-image">
<?php } ?>
... Content in div, if necessary ...
</div>
</div>

或者，让它更干净一点：

<?php 
  $testStyle = "";
  if(has_category( 'update' ) || has_category( 'uncategorized' )) {
    $testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
  } elseif(has_category( 'event' )) {
    $testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
  }
?>
<div class="test">
  <div class="bg-image" <?php echo $testStyle; ?>></div>
</div>

<style type="text/css">
  .bg-image {
    width:100%;
    min-width:300px;
    height:100px;
    background-size:cover;
  }
</style>

意识到如果.bg-image div 内没有任何内容，则需要添加一些 CSS 以使其“可见”：最小高度和宽度。

另外，请考虑使用get_template_directory_uri()，而不是get_bloginfo('template_directory')。

【讨论】：

我必须把 class=test 放在外面，我试着把
我认为有一些语法问题，它正在打印没有图像的文本链接到我的网站，也不在测试 div 之外
仍然没有图像。没有语法错误。在我的原始代码中，它正确引用了图像并显示出来，但当我把它作为背景时却没有
尝试使用我添加到答案中的 CSS 强制 CSS。如果可行，请将其放入您的 CSS 文件中，并根据您的需要进行调整。
已修复！我有两个不同的图像路径目录。它仅适用于定义的高度和宽度（使用 px 或 em）是否可以使用 %？