php - 使我的标题图像可访问且用户友好

Question

我在将图像设置为每个页面标题的标题背景时遇到问题。

我需要它能够响应地工作，并能够在其顶部添加更暗的背景，这样标题将更易于阅读，而且标题应始终保持在屏幕中间和屏幕尺寸。

我设法解决了一些问题，但这不是一个好的解决方案，因为它通过 CSS 放置图像，导致图像无法访问，我无法向其添加 alt 或 title 标签例如，如果用户想在 Pinterest 上分享，他将无法获得固定此图片的选项。

如何让它与 HTML 本身中的图像一起使用？

这是获取图像的 php 代码:

<?php
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
    $url = $thumb['0'];
?>
<div class="top-image" style="background-image:url('<?=$url?>')">
    <div class="in-table">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </div>
</div>

这里是一个页面的链接，如有任何帮助，我们将不胜感激，在此先感谢。

http://didyouknowfacts.org/animals/

Answer 1

其实你做的是对的。使用 CSS 创建背景图像是可行的方法。

但是，如果出于某种原因你想使用经典的 html，那么你需要的是这样的东西

<div class="top-image">
<div class="in-table">
    <img src="<?=$url?>" id=image />
    <h1 class="entry-title"><?php the_title(); ?></h1>
</div>
</div>

然后你需要创建它的css

.in-table {position:relative};
#image {position:absolute; left:0; top:0; width:100%;}

基本上要制作背景，您只需要为图像或标题创建一个绝对位置。在我上面的例子中，它是图像。